From d9b7763e20aae6eafec2bf8d397e9348a5d3c52d Mon Sep 17 00:00:00 2001 From: Zdenek Kostal Date: Fri, 25 Oct 2013 13:41:09 +0200 Subject: [PATCH 1/5] Fixed typo in webkitBackingStorePixelRatio --- src/HTMLCanvasElement.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/HTMLCanvasElement.js b/src/HTMLCanvasElement.js index 57a3da1..0579358 100644 --- a/src/HTMLCanvasElement.js +++ b/src/HTMLCanvasElement.js @@ -16,7 +16,7 @@ var backingStore, ratio, v; backingStore = context.backingStorePixelRatio || - context.webkitBackingtorePixelRatio || + context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || From c7cb28a3a249ae7ff397c1288aa80394a5b5309c Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Fri, 25 Oct 2013 17:49:23 -0600 Subject: [PATCH 2/5] clean up unused code --- src/HTMLCanvasElement.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/HTMLCanvasElement.js b/src/HTMLCanvasElement.js index 0579358..656bb6f 100644 --- a/src/HTMLCanvasElement.js +++ b/src/HTMLCanvasElement.js @@ -1,19 +1,12 @@ (function(prototype) { - var vendorPrefixes = [ - 'webkit', - 'moz', - 'ms', - 'o' - ]; - prototype.getContext = (function(_super) { return function(type) { context = _super.call(this, type); if (type === '2d') { - var backingStore, ratio, v; + var backingStore, ratio; backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || From 6cd7456192bf7d3336c6a434816afceba7311456 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Fri, 25 Oct 2013 22:02:40 -0600 Subject: [PATCH 3/5] general cleanup and refactor --- src/CanvasRenderingContext2D.js | 79 ++++++++++++++++++++------------- src/HTMLCanvasElement.js | 11 ++--- 2 files changed, 51 insertions(+), 39 deletions(-) diff --git a/src/CanvasRenderingContext2D.js b/src/CanvasRenderingContext2D.js index 0edffa5..a6ff620 100644 --- a/src/CanvasRenderingContext2D.js +++ b/src/CanvasRenderingContext2D.js @@ -1,6 +1,8 @@ (function(prototype) { - var getPixelRatio = function(context) { + var func, value, + + getPixelRatio = function(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingtorePixelRatio || context.mozBackingStorePixelRatio || @@ -10,6 +12,15 @@ return (window.devicePixelRatio || 1) / backingStore; }, + + forEach = function(obj, func) { + for (var p in obj) { + if (obj.hasOwnProperty(p)) { + func(obj[p], p); + } + } + }, + ratioArgs = { 'fillRect': 'all', 'clearRect': 'all', @@ -24,32 +35,30 @@ 'quadraticCurveTo': 'all', 'rect': 'all', 'translate': 'all' - }, - func, value; - - for (func in ratioArgs) { - if (ratioArgs.hasOwnProperty(func)) { - (function(value) { - prototype[func] = (function(_super) { - return function() { - var ratio = getPixelRatio(this), i, len, - args = Array.prototype.slice.call(arguments); - - if (value === 'all') { - return _super.apply(this, args.map(function(a) { return a * ratio; })); - } - else if (Object.prototype.toString.call(value) == '[object Array]') { - for (i = 0, len = value.length; i < len; i++) { - args[value[i]] *= ratio; - } - return _super.apply(this, args); - } - }; - })(prototype[func]); - })(ratioArgs[func]); - } - } + }; + + forEach(ratioArgs, function(value, key) { + prototype[func] = (function(_super) { + return function() { + var i, len, + ratio = getPixelRatio(this), + args = Array.prototype.slice.call(arguments); + + if (value === 'all') { + args = args.map(function(a) { + return a * ratio; + }); + } + else if (Array.isArray(value)) { + for (i = 0, len = value.length; i < len; i++) { + args[value[i]] *= ratio; + } + } + return _super.apply(this, args); + }; + })(prototype[func]); + }); // Text // @@ -61,9 +70,12 @@ args[1] *= ratio; // x args[2] *= ratio; // y - this.font = this.font.replace(/(\d+)(px|em|rem|pt)/g, function(w, m, u) { - return (m * ratio) + u; - }); + this.font = this.font.replace( + /(\d+)(px|em|rem|pt)/g, + function(w, m, u) { + return (m * ratio) + u; + } + ); return _super.apply(this, args); }; @@ -77,9 +89,12 @@ args[1] *= ratio; // x args[2] *= ratio; // y - this.font = this.font.replace(/(\d+)(px|em|rem|pt)/g, function(w, m, u) { - return (m * ratio) + u; - }); + this.font = this.font.replace( + /(\d+)(px|em|rem|pt)/g, + function(w, m, u) { + return (m * ratio) + u; + } + ); return _super.apply(this, args); }; diff --git a/src/HTMLCanvasElement.js b/src/HTMLCanvasElement.js index 656bb6f..3da1cab 100644 --- a/src/HTMLCanvasElement.js +++ b/src/HTMLCanvasElement.js @@ -1,13 +1,11 @@ (function(prototype) { - prototype.getContext = (function(_super) { return function(type) { - context = _super.call(this, type); + var backingStore, ratio, + context = _super.call(this, type); if (type === '2d') { - var backingStore, ratio; - backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || @@ -20,13 +18,12 @@ if (ratio > 1) { this.style.height = this.height + 'px'; this.style.width = this.width + 'px'; - this.width = this.width * ratio; - this.height = this.height * ratio; + this.width *= ratio; + this.height *= ratio; } } return context; }; })(prototype.getContext); - })(HTMLCanvasElement.prototype); From fcab9a99d4f824dcc31e339632d8681b92eb0906 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Fri, 25 Oct 2013 22:43:52 -0600 Subject: [PATCH 4/5] fix typo and key reference --- src/CanvasRenderingContext2D.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/CanvasRenderingContext2D.js b/src/CanvasRenderingContext2D.js index a6ff620..3322295 100644 --- a/src/CanvasRenderingContext2D.js +++ b/src/CanvasRenderingContext2D.js @@ -4,7 +4,7 @@ getPixelRatio = function(context) { var backingStore = context.backingStorePixelRatio || - context.webkitBackingtorePixelRatio || + context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || @@ -38,7 +38,7 @@ }; forEach(ratioArgs, function(value, key) { - prototype[func] = (function(_super) { + prototype[key] = (function(_super) { return function() { var i, len, ratio = getPixelRatio(this), @@ -57,7 +57,7 @@ return _super.apply(this, args); }; - })(prototype[func]); + })(prototype[key]); }); // Text From 07d6f42f2652966f916f3326a35ef59c46d4cd64 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Fri, 25 Oct 2013 22:46:50 -0600 Subject: [PATCH 5/5] prep for 1.0.1 release --- CHANGELOG | 4 ++++ README.md | 4 ++-- package.json | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 6133a5c..dc3dc27 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,2 +1,6 @@ += 1.0.1 + * Fixed Bug detecting the webkit backingStore + * General code cleanup + = 1.0.0 * Initial Release diff --git a/README.md b/README.md index 8ae8b35..b811db1 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ by the provided ratio. ```js var getPixelRatio = function(context) { var backingStore = context.backingStorePixelRatio || - context.webkitBackingtorePixelRatio || + context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || @@ -51,7 +51,7 @@ To use this module, simply include it before any of your canvas code ## TODO - More Complete context function converage - - Figure out how to write tests + - Figure out how to write tests for this type of thing ## Development diff --git a/package.json b/package.json index 9fa283f..0ee8a15 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "hidpi-canvas", "description": "A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.", - "version": "1.0.0", + "version": "1.0.1", "license": "Apache 2.0", "homepage": "https://github.com/jondavidjohn/hidpi-canvas-polyfill", "bugs": "https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues",