clipping regions now work correctly when device pixel ratio != 1

Gruntfile.js

@@ -56,6 +56,8 @@ module.exports = function(grunt) {
     'tests/js/unit/layerTests.js', 
     'tests/js/unit/shapeTests.js', 
     'tests/js/unit/ddTests.js', 
+    'tests/js/unit/canvasTests.js', 
+
     'tests/js/unit/shapes/rectTests.js', 
     'tests/js/unit/shapes/circleTests.js', 
     'tests/js/unit/shapes/ellipseTests.js', 

src/Canvas.js

@@ -46,6 +46,12 @@
             this.context = this.element.getContext(contextType);
             this.setSize(width, height);
         },
+        /**
+         * reset canvas context transform
+         */
+        reset: function() {
+          this.getContext().setTransform(1 * _pixelRatio, 0, 0, 1 * _pixelRatio, 0, 0);
+        },
         /**
          * get canvas element
          * @method
@@ -241,7 +247,9 @@
             context.beginPath();
             context.rect(clipX, clipY, clipWidth, clipHeight);
             context.clip();
-            context.setTransform(1, 0, 0, 1, 0, 0);
+            this.reset();
+            container._drawChildren(this);
+            context.restore();
         }
     };
 

src/Container.js

@@ -255,21 +255,21 @@
                 if (clip) {
                     canvas._clip(this);
                 }
-
+                else {
-                children = this.children;
+                    this._drawChildren(canvas);
-                len = children.length;
-
-                for(n = 0; n < len; n++) {
-                    children[n].drawScene(canvas);
-                }
-
-                if (clip) {
-                    canvas.getContext().restore();
                 }
             }
 
             return this;
         },
+        _drawChildren: function(canvas) {
+            var children = this.children;
+                len = children.length;
+
+            for(n = 0; n < len; n++) {
+                children[n].drawScene(canvas);
+            }
+        },
         drawHit: function() {
             var clip = this.getClipWidth() && this.getClipHeight() && this.nodeType !== 'Stage',
                 n = 0,

tests/js/unit/canvasTests.js

@@ -0,0 +1,32 @@
+Test.Modules.CANVAS = {
+    'pixel ratio': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: 578/2,
+            y: 100,
+            radius: 70,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 4
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+
+        stage.setWidth(578/2);
+        stage.setHeight(100);
+
+        stage.draw();
+
+
+
+    }
+};

tests/js/unit/containerTests.js

@@ -1,5 +1,5 @@
 Test.Modules.CONTAINER = {
-    'use clipping function': function(containerId) {
+    'clip': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -7,10 +7,7 @@ Test.Modules.CONTAINER = {
             draggable: true
         });
         var layer = new Kinetic.Layer({
-            clipFunc: function(canvas) {
+            clip: [0, 0, stage.getWidth() / 2, 100]
-                var context = canvas.getContext();
-                context.rect(0, 0, 400, 100);
-            }
         });
         var group = new Kinetic.Group();
         var circle = new Kinetic.Circle({