fixed pixel ratio issue with buffer canvas usage

src/Animation.js

@@ -214,7 +214,7 @@
             that._animationLoop();
         }
     };
-    RAF = (function() {
+    var RAF = (function() {
         return window.requestAnimationFrame
             || window.webkitRequestAnimationFrame
             || window.mozRequestAnimationFrame

src/Shape.js

@@ -229,6 +229,7 @@
                 stage, bufferCanvas, bufferContext;
 
             if(drawFunc && this.isVisible()) { 
+                // if buffer canvas is needed
                 if (this._useBufferCanvas()) {
                     stage = this.getStage();
                     bufferCanvas = stage.bufferCanvas;

src/Stage.js

@@ -617,7 +617,12 @@
             this.content.className = KINETICJS_CONTENT;
             container.appendChild(this.content);
 
-            this.bufferCanvas = new Kinetic.SceneCanvas();
+            // the buffer canvas pixel ratio must be 1 because it is used as an 
+            // intermediate canvas before copying the result onto a scene canvas.
+            // not setting it to 1 will result in an over compensation
+            this.bufferCanvas = new Kinetic.SceneCanvas({
+                pixelRatio: 1
+            });
             this.bufferHitCanvas = new Kinetic.HitCanvas();
 
             this._resizeDOM();

test/manual/manual-test.js

@@ -0,0 +1,36 @@
+suite('Manual', function() {
+    // ======================================================
+    test('tween node', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var rect = new Kinetic.Rect({
+            x: 100,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 2,
+            opacity: 0.2
+        });
+
+        layer.add(rect);
+        stage.add(layer);
+
+        var tween = new Kinetic.Tween({
+            node: rect, 
+            duration: 1,
+            x: 400,
+            y: 30,
+            rotation: Math.PI * 2,
+            opacity: 1,
+            strokeWidth: 6,
+            scaleX: 1.5
+        });
+
+
+        tween.play();
+ 
+
+    });
+});

test/runner.html

@@ -90,6 +90,9 @@
     <script src="functional/KineticEvents-test.js"></script>
     <script src="functional/DragAndDropEvents-test.js"></script>
 
+    <!--=============== manual tests ================-->
+    <script src="manual/manual-test.js"></script>
+
     <script>
       if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
       else { mocha.run(); }

test/unit/Stage-test.js

@@ -14,6 +14,30 @@ suite('Stage', function() {
       });
     });
 
+    // ======================================================
+    test('test stage buffer canvas and hit buffer canvas', function() {
+      var container = document.createElement('div');
+      container.id = 'container';
+
+      kineticContainer.appendChild(container);
+
+      // simulate pixelRatio = 2
+      Kinetic.pixelRatio = 2;
+
+      var stage = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+
+
+      assert.equal(stage.bufferCanvas.getPixelRatio(), 1);
+      assert.equal(stage.bufferHitCanvas.getPixelRatio(), 2);
+
+      // reset
+      Kinetic.pixelRatio = 1;
+    });
+
     // ======================================================
     test('instantiate stage with dom element', function() {
       var container = document.createElement('div');