smart-resize.js

// This is a plugin for ImpactJS that Google Chrome
// rendering for the Macbook Pro with Retina display.
// Based on the solution offered on http://www.html5rocks.com/en/tutorials/canvas/hidpi/
// It probably have a negative impact on performance.
// Use wisely.
//
// 
// Place this in lib/plugins/smart-resize.js


ig.module(
  'plugins.smart-resize'
)
.requires(
  'impact.system'
)
.defines(function() {

  ig.System.inject({

    deviceToBackingStoreRatio: function() {
      var devicePixelRatio  = ig.ua.pixelRatio || 1,
          context           = this.canvas.getContext('2d')
          backingStoreRatio = context.webkitBackingStorePixelRatio ||
                              context.mozBackingStorePixelRatio ||
                              context.msBackingStorePixelRatio ||
                              context.oBackingStorePixelRatio ||
                              context.backingStorePixelRatio ||
                              1;

      return devicePixelRatio / backingStoreRatio;
    },

    resize: function(width, height, scale) {
      var ratio = this.deviceToBackingStoreRatio();
      scale = scale || this.scale;

      // use normal resize behavior but change scale based on
      // deviceToBackingStoreRatio
      this.parent(width, height, scale * ratio);

      // we then use css to scale the canvas back down to normal size
      // if any extra upscaling occured
      if (ratio !== 1) {
        this.canvas.style.width = width * scale + "px";
        return this.canvas.style.height = height * scale + "px";
      }
    }
  });

});