Merge branch 'release/1.0.2'

jondavidjohn · jondavidjohn · commit 1f2e9f013021 · 2014-01-30T22:36:40.000-06:00
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,3 +1,7 @@
+= 1.0.2
+  * Fix bug with font scaling with multiple text calls (Issue #4)
+  * Add a few tests
+
 = 1.0.1
   * Fixed Bug detecting the webkit backingStore
   * General code cleanup
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -71,6 +71,5 @@ Good Pull Requests include:
 
 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"
+  - More complete canvas context method coverage.
+  - Figure out how to test this stuff.
diff --git a/index.html b/index.html
@@ -76,6 +76,7 @@
 
 			ctx.font="20px Arial";
 			ctx.fillText("Am I Sharp?",10,300);
+			ctx.fillText("Am I Sharp Also?",10,450);
 		 })();
 	</script>
 </body>
diff --git 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.1",
+  "version": "1.0.2",
   "license": "Apache 2.0",
   "homepage": "https://github.com/jondavidjohn/hidpi-canvas-polyfill",
   "bugs": "https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues",
diff --git a/src/CanvasRenderingContext2D.js b/src/CanvasRenderingContext2D.js
@@ -34,7 +34,8 @@
 			'isPointinStroke': 'all',
 			'quadraticCurveTo': 'all',
 			'rect': 'all',
-			'translate': 'all'
+			'translate': 'all',
+			'createRadialGradient': 'all'
 		};
 
 	forEach(ratioArgs, function(value, key) {
@@ -77,7 +78,14 @@
 				}
 			);
 
-			return _super.apply(this, args);
+			_super.apply(this, args);
+
+			this.font = this.font.replace(
+				/(\d+)(px|em|rem|pt)/g,
+				function(w, m, u) {
+					return (m / ratio) + u;
+				}
+			);
 		};
 	})(prototype.fillText);
 
@@ -96,7 +104,14 @@
 				}
 			);
 
-			return _super.apply(this, args);
+			_super.apply(this, args);
+
+			this.font = this.font.replace(
+				/(\d+)(px|em|rem|pt)/g,
+				function(w, m, u) {
+					return (m / ratio) + u;
+				}
+			);
 		};
 	})(prototype.strokeText);
 })(CanvasRenderingContext2D.prototype);
diff --git a/test/CanvasRenderingContext2D.html b/test/CanvasRenderingContext2D.html
@@ -8,7 +8,7 @@
 <body>
 	<div id="qunit"></div>
 	<div id="qunit-fixture">
-		<canvas id="canvas" height="300" width="500"></canvas>
+		<canvas id="test_canvas"></canvas>
 	</div>
 	<script src="qunit/qunit/qunit.js"></script>
 	<script src="../dist/hidpi-canvas.js"></script>
diff --git a/test/CanvasRenderingContext2DTests.js b/test/CanvasRenderingContext2DTests.js
@@ -1,5 +1,19 @@
-module('CanvasRenderingContext2D Tests');
+module('CanvasRenderingContext2D Tests', {
+	setup: function() {
+		window.devicePixelRatio = 2;
+	}
+});
+
+test('the font size remains unchanged after every text call', function() {
+	var font_value = '12px Helvetica',
+		canvas = document.getElementById('test_canvas'),
+		context = canvas.getContext('2d');
+
+	context.font = font_value;
+
+	context.fillText("Some Text",10,300);
+	equal(context.font, font_value);
 
-test('something', function() {
-	equal(true, true);
+	context.fillText("Some More Text",10,450);
+	equal(context.font, font_value);
 });
diff --git a/test/HTMLCanvasElement.html b/test/HTMLCanvasElement.html
@@ -8,7 +8,7 @@
 <body>
 	<div id="qunit"></div>
 	<div id="qunit-fixture">
-		<canvas id="canvas" height="300" width="500"></canvas>
+		<canvas id="test_canvas"></canvas>
 	</div>
 	<script src="qunit/qunit/qunit.js"></script>
 	<script src="../dist/hidpi-canvas.js"></script>
diff --git a/test/HTMLCanvasElementTests.js b/test/HTMLCanvasElementTests.js
@@ -1,5 +1,21 @@
-module('HTMLCanvasElement Tests');
+module('HTMLCanvasElement Tests', {
+	setup: function() {
+		window.devicePixelRatio = 2;
+	}
+});
+
+test('canvas dimensions scale to device pixel ratio', function() {
+	var canvas = document.getElementById('test_canvas'),
+		context;
+
+	canvas.height = 100;
+	canvas.width = 200;
+
+	context = canvas.getContext('2d');
+
+	equal(canvas.height, 200);
+	equal(canvas.width, 400);
 
-test('something', function() {
-	equal(true, true);
+	equal(canvas.style.height, '100px');
+	equal(canvas.style.width, '200px');
 });

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "hidpi-canvas",`
`3`	`3`	`"description": "A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.",`
`4`		`- "version": "1.0.1",`
	`4`	`+ "version": "1.0.2",`
`5`	`5`	`"license": "Apache 2.0",`
`6`	`6`	`"homepage": "https://github.com/jondavidjohn/hidpi-canvas-polyfill",`
`7`	`7`	`"bugs": "https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues",`