From 6663ec0652e42e26e7b6032ed6254b63527342cb Mon Sep 17 00:00:00 2001
From: Eric Rowell <erowell83@gmail.com>
Date: Sun, 25 Aug 2013 22:26:42 -0700
Subject: [PATCH] clipping regions now work correctly when device pixel ratio
 != 1

---
 Gruntfile.js                    |  2 ++
 src/Canvas.js                   | 10 +++++++++-
 src/Container.js                | 20 ++++++++++----------
 tests/js/unit/canvasTests.js    | 32 ++++++++++++++++++++++++++++++++
 tests/js/unit/containerTests.js |  7 ++-----
 5 files changed, 55 insertions(+), 16 deletions(-)
 create mode 100644 tests/js/unit/canvasTests.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 58814269..b3038e50 100644
--- a/Gruntfile.js
+++ b/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', 
diff --git a/src/Canvas.js b/src/Canvas.js
index d8a10eca..27bd3c67 100644
--- a/src/Canvas.js
+++ b/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();
         }
     };
 
diff --git a/src/Container.js b/src/Container.js
index 461103c6..292d0d45 100644
--- a/src/Container.js
+++ b/src/Container.js
@@ -255,21 +255,21 @@
                 if (clip) {
                     canvas._clip(this);
                 }
-
-                children = this.children;
-                len = children.length;
-
-                for(n = 0; n < len; n++) {
-                    children[n].drawScene(canvas);
-                }
-
-                if (clip) {
-                    canvas.getContext().restore();
+                else {
+                    this._drawChildren(canvas);
                 }
             }
 
             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,
diff --git a/tests/js/unit/canvasTests.js b/tests/js/unit/canvasTests.js
new file mode 100644
index 00000000..057ab132
--- /dev/null
+++ b/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();
+
+
+
+    }
+};
\ No newline at end of file
diff --git a/tests/js/unit/containerTests.js b/tests/js/unit/containerTests.js
index f7a82a0e..fc370d10 100644
--- a/tests/js/unit/containerTests.js
+++ b/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) {
-                var context = canvas.getContext();
-                context.rect(0, 0, 400, 100);
-            }
+            clip: [0, 0, stage.getWidth() / 2, 100]
         });
         var group = new Kinetic.Group();
         var circle = new Kinetic.Circle({