refactored pixel ratio scale logic

src/Canvas.js

@@ -1,4 +1,4 @@
-(function() {
+(function() {    
     /**
      * Canvas Renderer constructor
      * @constructor
@@ -12,6 +12,7 @@
         this.context = this.element.getContext('2d');
         this.setSize(width || 0, height || 0);
     };
+    
     // calculate pixel ratio
     var canvas = document.createElement('canvas'), context = canvas.getContext('2d'), devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
     Kinetic.Canvas.pixelRatio = devicePixelRatio / backingStoreRatio;
@@ -190,19 +191,6 @@
                 this.context.lineJoin = lineJoin;
             }
         },
-        _handlePixelRatio: function() {
-            var pixelRatio = Kinetic.Canvas.pixelRatio;
-            if(pixelRatio !== 1) {
-                this.getContext().scale(pixelRatio, pixelRatio);
-            }
-        },
-        _counterPixelRatio: function() {
-            var pixelRatio = Kinetic.Canvas.pixelRatio;
-            if(pixelRatio !== 1) {
-                pixelRatio = 1 / pixelRatio;
-                this.getContext().scale(pixelRatio, pixelRatio);
-            }
-        },
         _applyAncestorTransforms: function(node) {
             var context = this.context;
             node._eachAncestorReverse(function(no) {
@@ -217,6 +205,16 @@
     };
 
     Kinetic.SceneCanvas.prototype = {
+        setWidth: function(width) {
+            this.width = width;
+            this.element.width = width;
+            this.element.style.width = width + 'px';
+        },
+        setHeight: function(height) {
+            this.height = height;
+            this.element.height = height;
+            this.element.style.height = height + 'px';
+        },
         _fillColor: function(shape) {
             var context = this.context, fill = shape.getFill();
             context.fillStyle = fill;

src/Node.js

@@ -629,8 +629,18 @@
          * @methodOf Kinetic.Node.prototype
          */
         getTransform: function() {
-            var m = new Kinetic.Transform(), attrs = this.attrs, x = attrs.x, y = attrs.y, rotation = attrs.rotation, scale = attrs.scale, scaleX = scale.x, scaleY = scale.y, offset = attrs.offset, offsetX = offset.x, offsetY = offset.y;
+            var m = new Kinetic.Transform(), 
-
+                attrs = this.attrs, 
+                x = attrs.x, 
+                y = attrs.y, 
+                rotation = attrs.rotation, 
+                scale = attrs.scale, 
+                scaleX = scale.x, 
+                scaleY = scale.y, 
+                offset = attrs.offset, 
+                offsetX = offset.x, 
+                offsetY = offset.y;
+                
             if(x !== 0 || y !== 0) {
                 m.translate(x, y);
             }
@@ -713,7 +723,6 @@
             }
             context = canvas.getContext();
             context.save();
-            canvas._counterPixelRatio();
 
             if(x || y) {
                 context.translate(-1 * x, -1 * y);
@@ -802,20 +811,22 @@
             }
         },
         _clearTransform: function() {
-            var attrs = this.attrs, scale = attrs.scale, offset = attrs.offset;
+            var attrs = this.attrs, 
-            var trans = {
+              scale = attrs.scale, 
-                x: attrs.x,
+              offset = attrs.offset,
-                y: attrs.y,
+              trans = {
-                rotation: attrs.rotation,
+                  x: attrs.x,
-                scale: {
+                  y: attrs.y,
-                    x: scale.x,
+                  rotation: attrs.rotation,
-                    y: scale.y
+                  scale: {
-                },
+                      x: scale.x,
-                offset: {
+                      y: scale.y
-                    x: offset.x,
+                  },
-                    y: offset.y
+                  offset: {
-                }
+                      x: offset.x,
-            };
+                      y: offset.y
+                  }
+              };
 
             this.attrs.x = 0;
             this.attrs.y = 0;

src/Shape.js

@@ -167,7 +167,6 @@
 
             if(drawFunc && this.isVisible()) {
                 context.save();
-                canvas._handlePixelRatio();
                 canvas._applyOpacity(this);
                 canvas._applyLineJoin(this);
                 canvas._applyAncestorTransforms(this);

tests/js/manualTests.js

@@ -1297,7 +1297,7 @@ Test.Modules.DRAG_AND_DROP = {
         layer.add(group);
         stage.add(layer);
     },
-    'translate, rotate, center offset, and scale shape, and then drag and drop': function(containerId) {
+    '*translate, rotate, center offset, and scale shape, and then drag and drop': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1335,6 +1335,8 @@ Test.Modules.DRAG_AND_DROP = {
             rect.rotate(0.01);
         }, layer);
         anim.start();
+        
+        showHit(layer);
     },
     'stage and shape draggable': function(containerId) {
         var stage = new Kinetic.Stage({