Merge branch 'release/1.0.0'

CHANGELOG

@@ -1,2 +1,2 @@
-= 0.0.1
-  * Initial
+= 1.0.0
+  * Initial Release

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"

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']
 		}
 	});
 

README.md

@@ -1,2 +1,57 @@
-hidpi-canvas
-===========
+# HiDPI Canvas Polyfill
+
+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.
+
+## 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
+
+```html
+  ...
+  <script src=".../hidpi-canvas.min.js"></script>
+  <script src=".../your-canvas-stuff.js"></script>
+  ...
+```
+
+## TODO
+
+  - More Complete context function converage
+  - Figure out how to write tests
+
+## Development
+
+See [CONTRIBUTING.md](https://github.com/jondavidjohn/hidpi-canvas-polyfill/blob/develop/CONTRIBUTING.md)
+

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);

package.json

@@ -1,13 +1,13 @@
 {
   "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": "",
-  "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": {

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);