From e23e60c768f277a61b9310f5216975155c4089d2 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Tue, 22 Oct 2013 13:21:11 -0600 Subject: [PATCH 1/8] fill out README --- README.md | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8232297..04a5900 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,25 @@ -hidpi-canvas -=========== +# HiDPI Canvas Polyfill - (Currently pre-release, Do not use) + +This is a drop-in polyfill to scale canvas appropriately to maintain sharpness +in browsers that currently do not provide the appropriately scaled backing +store to do this automatically. + +As of this writing Safari is the only browser that accounts for this. + +The goal of this drop-in is to make this behavior consistent accross all browsers, +without having to modify any of your canvas code. + +## Usage + +To use this module, simply include it before any of your canvas code + + ... + + + ... + +## TODO + + - More Complete context function converage + - Figure out how to test this + - Decide how to handle image drawing? (likely, don't handle it at all) From 164f3f8205867221e281575ba5b0f1ca92f53b6c Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Tue, 22 Oct 2013 13:23:04 -0600 Subject: [PATCH 2/8] fix up README a bit --- README.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 04a5900..5e3a2d1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ -# HiDPI Canvas Polyfill - (Currently pre-release, Do not use) +# HiDPI Canvas Polyfill + +**(pre-release)** This is a drop-in polyfill to scale canvas appropriately to maintain sharpness in browsers that currently do not provide the appropriately scaled backing @@ -13,10 +15,12 @@ without having to modify any of your canvas code. To use this module, simply include it before any of your canvas code - ... - - - ... +```html + ... + + + ... +``` ## TODO From a104f6afd81d425b02930e60fd544c81f3027bb2 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Tue, 22 Oct 2013 13:30:21 -0600 Subject: [PATCH 3/8] add CONTRIBUTING.md and point to it in README --- CONTRIBUTING.md | 74 +++++++++++++++++++++++++++++++++++++++++++++++++ Gruntfile.js | 5 ++++ README.md | 5 ++++ 3 files changed, 84 insertions(+) create mode 100644 CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..d0fddbf --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,74 @@ +# How to Contribute + +Yay, you're interested in helping this thing suck less. Good for you! + +Some things you should be familiar with before getting started + + - Unit testing (with [QUnit](http://qunitjs.com)) + - [Grunt](http://gruntjs.org) (available via `npm install -g grunt-cli`) + - [Node/NPM](https://npmjs.org/) (available via homebrew) + +## Project Layout + + - `src/` - Coffeescript Source files + - `dist/` - Compiled, Concatinated, and Minified + - `test/` - Unit Testing Resources + + +## Development + +Once you have NPM and Grunt installed, clone the repository and install all dependancies + + git clone git@.....hidpi-canvas-polyfill.git + cd hidpi-canvas-polyfill + npm install + +Then to build a distribution run this grunt task + + grunt dist + +This will generate the compiled (and minified) sourc in your `dist/` directory +along with a distributable zip archive. + +Any time you change any of the `src/**/*.js` files you'll +need to re-run this command. + +You can also use + + grunt watch + +to automatically reconcat the unminified file everytime you +change any of the `src/**/*.js` files. + +## Testing + +### Writing Tests + +The `test/` directory mirrors the `src/` directory for test organization, make +sure to organize and produce tests that fit the patterns present. + +### Running Tests + + grunt test + +## On Contribution + +### Be a Chameleon + +Try your best to follow the present code formatting and patterns in place. + +### Pull Requests + +Good Pull Requests include: + + - A clear explaination of the problem (or enhancement) + - Clean commit history (squash where it makes sense) + - Relevant Tests (either updated and/or new) + +# TODO + +A few things it currently lacks that I'd like to see improved + + - Better touch support + - Responsive interactivity + - Better handling of a large number of "bubbles" diff --git a/Gruntfile.js b/Gruntfile.js index 2a25fd4..5307207 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -78,6 +78,11 @@ module.exports = function (grunt) { 'test/CanvasRenderingContext2D.html', 'test/HTMLCanvasElement.html' ] + }, + + watch: { + files: ['<%= concat.dist.src %>'], + tasks: ['clean', 'concat:dist'] } }); diff --git a/README.md b/README.md index 5e3a2d1..a20ab48 100644 --- a/README.md +++ b/README.md @@ -27,3 +27,8 @@ To use this module, simply include it before any of your canvas code - More Complete context function converage - Figure out how to test this - Decide how to handle image drawing? (likely, don't handle it at all) + +## Development + +See [CONTRIBUTING.md](https://github.com/jondavidjohn/hidpi-canvas-polyfill/blob/develop/README.md) + From 0a91c10d560878a17c20c6e5fe2b10dace6a3290 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Tue, 22 Oct 2013 13:31:00 -0600 Subject: [PATCH 4/8] Update to correct URL --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a20ab48..fb1c6a5 100644 --- a/README.md +++ b/README.md @@ -30,5 +30,5 @@ To use this module, simply include it before any of your canvas code ## Development -See [CONTRIBUTING.md](https://github.com/jondavidjohn/hidpi-canvas-polyfill/blob/develop/README.md) +See [CONTRIBUTING.md](https://github.com/jondavidjohn/hidpi-canvas-polyfill/blob/develop/CONTRIBUTING.md) From 9bfbcac812a33cfde46545aff2dcb6f595ebe595 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Tue, 22 Oct 2013 13:55:40 -0600 Subject: [PATCH 5/8] update package.json --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 7df3753..9369575 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,11 @@ "description": "A JavaScript module to polyfill consistent and automatic HiDPI Canvas support.", "version": "0.0.1-pre", "license": "Apache 2.0", - "homepage": "", - "bugs": "", + "homepage": "https://github.com/jondavidjohn/hidpi-canvas-polyfill", + "bugs": "https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues", "repository": { "type": "git", - "url": "" + "url": "git@github.com:jondavidjohn/hidpi-canvas-polyfill.git" }, "author": "Jonathan D. Johnson (http://jondavidjohn.com)", "devDependencies": { From 39342e1d691527b666271cd76d3a18e1e650e7a1 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Wed, 23 Oct 2013 09:16:38 -0600 Subject: [PATCH 6/8] abstract out general use of *= ratio of arguments - Make function list declaritive --- index.html | 11 ++- src/CanvasRenderingContext2D.js | 140 +++++++++++++------------------- 2 files changed, 67 insertions(+), 84 deletions(-) diff --git a/index.html b/index.html index 6127069..e9bff29 100644 --- a/index.html +++ b/index.html @@ -37,8 +37,8 @@ for(var i=0;i<4;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); - var x = 225+j*50; // x coordinate - var y = 225+i*50; // y coordinate + var x = 225+j*50; // x coordinate + var y = 225+i*50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle @@ -55,6 +55,13 @@ } ctx.closePath(); + // arcTo + ctx.beginPath(); + ctx.moveTo(250,150); + ctx.arcTo(350,50,350,100,50); + ctx.stroke(); + ctx.closePath(); + // Quadradic Curves ctx.beginPath(); ctx.moveTo(75,40); diff --git a/src/CanvasRenderingContext2D.js b/src/CanvasRenderingContext2D.js index 4ff32b8..0edffa5 100644 --- a/src/CanvasRenderingContext2D.js +++ b/src/CanvasRenderingContext2D.js @@ -1,99 +1,75 @@ (function(prototype) { var getPixelRatio = function(context) { - var backingStore = context.backingStorePixelRatio || - context.webkitBackingtorePixelRatio || - context.mozBackingStorePixelRatio || - context.msBackingStorePixelRatio || - context.oBackingStorePixelRatio || - context.backingStorePixelRatio || 1; + var backingStore = context.backingStorePixelRatio || + context.webkitBackingtorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + + return (window.devicePixelRatio || 1) / backingStore; + }, + ratioArgs = { + 'fillRect': 'all', + 'clearRect': 'all', + 'strokeRect': 'all', + 'moveTo': 'all', + 'lineTo': 'all', + 'arc': [0,1,2], + 'arcTo': 'all', + 'bezierCurveTo': 'all', + 'isPointinPath': 'all', + 'isPointinStroke': 'all', + '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]); + } + } - return (window.devicePixelRatio || 1) / backingStore; - }; - // Rect - // - - prototype.fillRect = (function(_super) { - return function() { - var ratio = getPixelRatio(this), - args = Array.prototype.slice.call(arguments); - - return _super.apply(this, args.map(function(a) { return a * ratio; })); - }; - })(prototype.fillRect); - - prototype.clearRect = (function(_super) { - return function() { - var ratio = getPixelRatio(this), - args = Array.prototype.slice.call(arguments); - - return _super.apply(this, args.map(function(a) { return a * ratio; })); - }; - })(prototype.clearRect); - - prototype.strokeRect = (function(_super) { - return function() { - var ratio = getPixelRatio(this), - args = Array.prototype.slice.call(arguments); - - return _super.apply(this, args.map(function(a) { return a * ratio; })); - }; - })(prototype.strokeRect); - - // Lines + // Text // - - prototype.moveTo = (function(_super) { - return function() { - var ratio = getPixelRatio(this), - args = Array.prototype.slice.call(arguments); - - return _super.apply(this, args.map(function(a) { return a * ratio; })); - }; - })(prototype.moveTo); - - prototype.lineTo = (function(_super) { + prototype.fillText = (function(_super) { return function() { var ratio = getPixelRatio(this), args = Array.prototype.slice.call(arguments); - return _super.apply(this, args.map(function(a) { return a * ratio; })); - }; - })(prototype.lineTo); - - // Arcs - // - - prototype.arc = (function(_super) { - return function() { - var ratio = getPixelRatio(this), - args = Array.prototype.slice.call(arguments); + args[1] *= ratio; // x + args[2] *= ratio; // y - args[0] *= ratio; // x - args[1] *= ratio; // y - args[2] *= ratio; // radius + this.font = this.font.replace(/(\d+)(px|em|rem|pt)/g, function(w, m, u) { + return (m * ratio) + u; + }); return _super.apply(this, args); }; - })(prototype.arc); - - // Bezier Curves - // - - prototype.bezierCurveTo = (function(_super) { - return function() { - var ratio = getPixelRatio(this), - args = Array.prototype.slice.call(arguments); - - return _super.apply(this, args.map(function(a) { return a * ratio; })); - }; - })(prototype.bezierCurveTo); - - // Text - // + })(prototype.fillText); - prototype.fillText = (function(_super) { + prototype.strokeText = (function(_super) { return function() { var ratio = getPixelRatio(this), args = Array.prototype.slice.call(arguments); @@ -107,5 +83,5 @@ return _super.apply(this, args); }; - })(prototype.fillText); + })(prototype.strokeText); })(CanvasRenderingContext2D.prototype); From fcf076d4ad0ec85f81745672531a3cdb16011e85 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Wed, 23 Oct 2013 09:26:28 -0600 Subject: [PATCH 7/8] add content to README.md --- README.md | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index fb1c6a5..95940a3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # HiDPI Canvas Polyfill -**(pre-release)** - This is a drop-in polyfill to scale canvas appropriately to maintain sharpness in browsers that currently do not provide the appropriately scaled backing store to do this automatically. @@ -11,6 +9,32 @@ As of this writing Safari is the only browser that accounts for this. The goal of this drop-in is to make this behavior consistent accross all browsers, without having to modify any of your canvas code. +## Scope + +Currently this plugin handles most general cross browser drawing functions, but +feel free to send Pull Requests as you find functions you need supported. + +If the function simply needs all or some of it's arguments multiplied by the ratio, +it should simply require you to add it to the `ratioArgs` object, following the proper +pattern. + +It currently leaves images alone, so to retinize images on your canvas, simply +duplicate the getPixelRatio function in your code and divide your image dimensions +by the provided ratio. + +```js +var getPixelRatio = function(context) { + var backingStore = context.backingStorePixelRatio || + context.webkitBackingtorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + + return (window.devicePixelRatio || 1) / backingStore; +}; +``` + ## Usage To use this module, simply include it before any of your canvas code @@ -25,8 +49,7 @@ To use this module, simply include it before any of your canvas code ## TODO - More Complete context function converage - - Figure out how to test this - - Decide how to handle image drawing? (likely, don't handle it at all) + - Figure out how to write tests ## Development From 7d1855196bab9128807ea60765bfb52c213f3857 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Wed, 23 Oct 2013 09:29:44 -0600 Subject: [PATCH 8/8] bump version and prep for 1.0.0 --- CHANGELOG | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index d0bd3f8..6133a5c 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,2 +1,2 @@ -= 0.0.1 - * Initial += 1.0.0 + * Initial Release diff --git a/package.json b/package.json index 9369575..9fa283f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "hidpi-canvas", - "description": "A JavaScript module to polyfill consistent and automatic HiDPI Canvas support.", - "version": "0.0.1-pre", + "description": "A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.", + "version": "1.0.0", "license": "Apache 2.0", "homepage": "https://github.com/jondavidjohn/hidpi-canvas-polyfill", "bugs": "https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues",