diff --git a/src/Canvas.js b/src/Canvas.js index 4d86d84e..aed38d0d 100644 --- a/src/Canvas.js +++ b/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) { diff --git a/src/Layer.js b/src/Layer.js index 6073dd7f..a99641fb 100644 --- a/src/Layer.js +++ b/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 diff --git a/tests/js/Test.js b/tests/js/Test.js index d11f6c27..0d6be109 100644 --- a/tests/js/Test.js +++ b/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 ==================='); } }; diff --git a/tests/js/unit/layerTests.js b/tests/js/unit/layerTests.js index cbba2447..e93c65cf 100644 --- a/tests/js/unit/layerTests.js +++ b/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) {