diff --git a/src/Canvas.js b/src/Canvas.js index 7ff85ddf..6c204f28 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -6,13 +6,15 @@ * @param {Number} height */ Kinetic.Canvas = function(width, height) { + this.width = width; + this.height = height; this.element = document.createElement('canvas'); this.context = this.element.getContext('2d'); - - // set dimensions - this.element.width = width || 0; - this.element.height = height || 0; + this.setSize(width || 0, height || 0); }; + // 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; + Kinetic.Canvas.pixelRatio = devicePixelRatio / backingStoreRatio; Kinetic.Canvas.prototype = { /** @@ -47,7 +49,10 @@ * @methodOf Kinetic.Canvas.prototype */ setWidth: function(width) { - this.element.width = width; + this.width = width; + // take into account pixel ratio + this.element.width = width * Kinetic.Canvas.pixelRatio; + this.element.style.width = width + 'px'; }, /** * set height @@ -55,7 +60,10 @@ * @methodOf Kinetic.Canvas.prototype */ setHeight: function(height) { - this.element.height = height; + this.height = height; + // take into account pixel ratio + this.element.height = height * Kinetic.Canvas.pixelRatio; + this.element.style.height = height + 'px'; }, /** * get width @@ -63,7 +71,7 @@ * @methodOf Kinetic.Canvas.prototype */ getWidth: function() { - return this.element.width; + return this.width; }, /** * get height @@ -71,7 +79,7 @@ * @methodOf Kinetic.Canvas.prototype */ getHeight: function() { - return this.element.height; + return this.height; }, /** * set size @@ -163,6 +171,12 @@ if(lineJoin) { this.context.lineJoin = lineJoin; } + }, + _handlePixelRatio: function() { + var pixelRatio = Kinetic.Canvas.pixelRatio; + if(pixelRatio !== 1) { + this.getContext().scale(pixelRatio, pixelRatio); + } } }; diff --git a/src/Global.js b/src/Global.js index 0b744347..7a057541 100644 --- a/src/Global.js +++ b/src/Global.js @@ -28,7 +28,8 @@ /** * @namespace */ -var Kinetic = {}; (function() { +var Kinetic = {}; +(function() { Kinetic.version = '@version'; /** * @namespace diff --git a/src/Shape.js b/src/Shape.js index 063fada4..58e02ad3 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -230,6 +230,7 @@ } context.save(); + canvas._handlePixelRatio(); canvas._applyOpacity(this); canvas._applyLineJoin(this); var len = family.length; diff --git a/src/shapes/Text.js b/src/shapes/Text.js index 74f652a9..d872fae7 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -44,6 +44,7 @@ }, drawFunc: function(canvas) { var context = canvas.getContext(); + // draw rect Kinetic.Rect.prototype.drawFunc.call(this, canvas);