canvas left and top inline styles are now set to 0

src/Canvas.js

@@ -1,15 +1,15 @@
-(function() {    
+(function() {
     // 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, 
+    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,
         _pixelRatio = devicePixelRatio / backingStoreRatio;
-        
+
     /**
      * Canvas Renderer constructor
      * @constructor
@@ -29,17 +29,23 @@
             var width = config.width || 0,
                 height = config.height || 0,
                 pixelRatio = config.pixelRatio || _pixelRatio,
-                contextType = config.contextType || '2d'; 
+                contextType = config.contextType || '2d';
 
             this.pixelRatio = pixelRatio;
             this.element = document.createElement('canvas');
+
+            // set inline styles
             this.element.style.padding = 0;
             this.element.style.margin = 0;
             this.element.style.border = 0;
             this.element.style.background = 'transparent';
+            this.element.style.position = 'absolute';
+            this.element.style.top = 0;
+            this.element.style.left = 0;
+
             this.context = this.element.getContext(contextType);
-            this.setSize(width, height);   
-        },        
+            this.setSize(width, height);
+        },
         /**
          * get canvas element
          * @method
@@ -216,16 +222,16 @@
                 t, m;
 
             node._eachAncestorReverse(function(no) {
-                t = no.getTransform(true); 
+                t = no.getTransform(true);
                 m = t.getMatrix();
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }, true);
         },
         _clip: function(container) {
-            var context = this.getContext(); 
+            var context = this.getContext();
             context.save();
             this._applyAncestorTransforms(container);
-            context.beginPath(); 
+            context.beginPath();
             container.getClipFunc()(this);
             context.clip();
             context.setTransform(1, 0, 0, 1, 0, 0);
@@ -237,13 +243,13 @@
     };
 
     Kinetic.SceneCanvas.prototype = {
-        setWidth: function(width) {  
-            var pixelRatio = this.pixelRatio;           
+        setWidth: function(width) {
+            var pixelRatio = this.pixelRatio;
             Kinetic.Canvas.prototype.setWidth.call(this, width);
             this.context.scale(pixelRatio, pixelRatio);
         },
-        setHeight: function(height) { 
-            var pixelRatio = this.pixelRatio; 
+        setHeight: function(height) {
+            var pixelRatio = this.pixelRatio;
             Kinetic.Canvas.prototype.setHeight.call(this, height);
             this.context.scale(pixelRatio, pixelRatio);
         },
@@ -253,13 +259,13 @@
             shape._fillFunc(context);
         },
         _fillPattern: function(shape) {
-            var context = this.context, 
-                fillPatternImage = shape.getFillPatternImage(), 
-                fillPatternX = shape.getFillPatternX(), 
-                fillPatternY = shape.getFillPatternY(), 
-                fillPatternScale = shape.getFillPatternScale(), 
-                fillPatternRotation = shape.getFillPatternRotation(), 
-                fillPatternOffset = shape.getFillPatternOffset(), 
+            var context = this.context,
+                fillPatternImage = shape.getFillPatternImage(),
+                fillPatternX = shape.getFillPatternX(),
+                fillPatternY = shape.getFillPatternY(),
+                fillPatternScale = shape.getFillPatternScale(),
+                fillPatternRotation = shape.getFillPatternRotation(),
+                fillPatternOffset = shape.getFillPatternOffset(),
                 fillPatternRepeat = shape.getFillPatternRepeat();
 
             if(fillPatternX || fillPatternY) {
@@ -279,10 +285,10 @@
             context.fill();
         },
         _fillLinearGradient: function(shape) {
-            var context = this.context, 
-                start = shape.getFillLinearGradientStartPoint(), 
-                end = shape.getFillLinearGradientEndPoint(), 
-                colorStops = shape.getFillLinearGradientColorStops(), 
+            var context = this.context,
+                start = shape.getFillLinearGradientStartPoint(),
+                end = shape.getFillLinearGradientEndPoint(),
+                colorStops = shape.getFillLinearGradientColorStops(),
                 grd = context.createLinearGradient(start.x, start.y, end.x, end.y);
 
             if (colorStops) {
@@ -291,16 +297,16 @@
                     grd.addColorStop(colorStops[n], colorStops[n + 1]);
                 }
                 context.fillStyle = grd;
-                context.fill();  
+                context.fill();
             }
         },
         _fillRadialGradient: function(shape) {
-            var context = this.context, 
-            start = shape.getFillRadialGradientStartPoint(), 
-            end = shape.getFillRadialGradientEndPoint(), 
-            startRadius = shape.getFillRadialGradientStartRadius(), 
-            endRadius = shape.getFillRadialGradientEndRadius(), 
-            colorStops = shape.getFillRadialGradientColorStops(), 
+            var context = this.context,
+            start = shape.getFillRadialGradientStartPoint(),
+            end = shape.getFillRadialGradientEndPoint(),
+            startRadius = shape.getFillRadialGradientStartRadius(),
+            endRadius = shape.getFillRadialGradientEndRadius(),
+            colorStops = shape.getFillRadialGradientColorStops(),
             grd = context.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
 
             // build color stops
@@ -311,11 +317,11 @@
             context.fill();
         },
         _fill: function(shape, skipShadow) {
-            var context = this.context, 
-                hasColor = shape.getFill(), 
-                hasPattern = shape.getFillPatternImage(), 
-                hasLinearGradient = shape.getFillLinearGradientColorStops(), 
-                hasRadialGradient = shape.getFillRadialGradientColorStops(), 
+            var context = this.context,
+                hasColor = shape.getFill(),
+                hasPattern = shape.getFillPatternImage(),
+                hasLinearGradient = shape.getFillLinearGradientColorStops(),
+                hasRadialGradient = shape.getFillRadialGradientColorStops(),
                 fillPriority = shape.getFillPriority();
 
             context.save();
@@ -357,15 +363,15 @@
             }
         },
         _stroke: function(shape, skipShadow) {
-            var context = this.context, 
-                stroke = shape.getStroke(), 
-                strokeWidth = shape.getStrokeWidth(), 
+            var context = this.context,
+                stroke = shape.getStroke(),
+                strokeWidth = shape.getStrokeWidth(),
                 dashArray = shape.getDashArray();
 
             if(stroke || strokeWidth) {
                 context.save();
                 if (!shape.getStrokeScaleEnabled()) {
-                  
+
                     context.setTransform(1, 0, 0, 1, 0, 0);
                 }
                 this._applyLineCap(shape);
@@ -430,8 +436,8 @@
             context.restore();
         },
         _stroke: function(shape) {
-            var context = this.context, 
-                stroke = shape.getStroke(), 
+            var context = this.context,
+                stroke = shape.getStroke(),
                 strokeWidth = shape.getStrokeWidth();
 
             if(stroke || strokeWidth) {

src/Layer.js

@@ -7,7 +7,6 @@
             this.nodeType = 'Layer';
             this.createAttrs();
             this.canvas = new Kinetic.SceneCanvas();
-            this.canvas.getElement().style.position = 'absolute';
             this.hitCanvas = new Kinetic.HitCanvas();
             // call super constructor
             Kinetic.Container.call(this, config);
@@ -56,7 +55,7 @@
         },
         drawHit: function() {
             var layer = this.getLayer();
-            
+
             if(layer && layer.getClearBeforeDraw()) {
                 layer.getHitCanvas().clear();
             }
@@ -70,7 +69,7 @@
          * @memberof Kinetic.Node.prototype
          */
         getCanvas: function() {
-            return this.canvas;     
+            return this.canvas;
         },
         /**
          * get layer hit canvas
@@ -86,7 +85,7 @@
          * @memberof Kinetic.Node.prototype
          */
         getContext: function() {
-            return this.getCanvas().getContext(); 
+            return this.getCanvas().getContext();
         },
         /**
          * clear canvas tied to the layer

tests/js/Test.js

@@ -36,13 +36,13 @@ function warn(condition, message) {
 }
 function testDataUrl(actual, key, message) {
     var expected = dataUrls[key];
-    
+
     if(actual !== expected) {
         if(testCounter.style.backgroundColor != 'red') {
             testCounter.style.backgroundColor = 'orange';
             testCounter.style.color = 'black';
         }
-        console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');  
+        console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
     }
     numTests++;
     testCounter.innerHTML = numTests;
@@ -55,7 +55,7 @@ function testJSON(actual, expected, message) {
             testCounter.style.color = 'black';
         }
         console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
-        
+
         console.log('actual:');
         console.log(actual);
         console.log('expected:');
@@ -69,6 +69,7 @@ function log(message) {
 }
 
 function showHit(layer) {
+    layer.hitCanvas.element.style.position = 'relative';
 	document.body.appendChild(layer.hitCanvas.element);
 }
 
@@ -119,11 +120,11 @@ Test.prototype = {
                 }
             }
         };
-        
+
 		// loop through modules
         for(var mod in modules) {
         	console.log('=================== ' + mod + ' TESTS ===================');
-        	
+
             var tests = modules[mod];
 
 			// loop through tests
@@ -137,10 +138,10 @@ Test.prototype = {
                     obj.testMessage.setAttribute('class', 'gray');
                 }
             }
-            
-            
+
+
         }
-        
+
         console.log('=================== ASYNC OUTPUT ===================');
     }
 };

tests/js/unit/layerTests.js

@@ -27,6 +27,8 @@ Test.Modules.LAYER = {
         test(style.margin === '0px', 'canvas margin style should be 0px');
         test(style.padding === '0px', 'canvas padding style should be 0px');
         test(style.backgroundColor === 'transparent', 'canvas backgroundColor style should be transparent');
+        test(style.top === '0px', 'canvas top should be 0px');
+        test(style.left === '0px', 'canvas left should be 0px');
     },
 
     'layer getIntersection()': function(containerId) {