Add support for retina (HDPI) displays.

chrisseaton · chrisseaton · commit 150f5249aae6 · 2014-05-04T15:03:36.000+01:00
diff --git a/blockcode/blocks.css b/blockcode/blocks.css
@@ -9,7 +9,8 @@ h1{ margin: 0em; }
 .script{ background-color: LightSteelBlue; height: 94%; overflow-y: auto; }
 .script.over{ background-color: CadetBlue; }
 .canvas-column{ width: 46%; height: 85%; float: right; margin-right: 10px; }
-.canvas{ background-color: white; width: 100%; height: 85%; }
+.canvas-placeholder{ width: 100%; height: 85%; }
+.canvas{ background-color: white; position: absolute; }
 .block{ padding: 5px; margin: 10px; cursor: move; }
 .block.running{ outline: 2px solid red; }
 .block.next{ outline: 2px solid green; }
diff --git a/blockcode/index.html b/blockcode/index.html
@@ -29,6 +29,7 @@ <h2>Examples:
 				<option value="spiral">Spiral</option>
 			</select>
 		</h2>
+		<div class="canvas-placeholder"></div>
 		<canvas class="canvas"></canvas>
 	</div>
 	<script src="util.js"></script>
diff --git a/blockcode/turtle.js b/blockcode/turtle.js
@@ -1,6 +1,8 @@
 (function(){
 	'use strict';
 
+	var PIXEL_RATIO = window.devicePixelRatio || 1;
+	var canvasPlaceholder = document.querySelector('.canvas-placeholder');
 	var canvas = document.querySelector('.canvas');
 	var script = document.querySelector('.script');
 	var ctx = canvas.getContext('2d');
@@ -9,10 +11,14 @@
 	var WIDTH, HEIGHT, position, direction, visible, pen, color;
 
 	function onResize(evt){
-		canvas.setAttribute('width', canvas.scrollWidth);
-		canvas.setAttribute('height', canvas.scrollHeight);
-		WIDTH = canvas.scrollWidth;
-		HEIGHT = canvas.scrollHeight;
+		WIDTH = canvasPlaceholder.getBoundingClientRect().width * PIXEL_RATIO;
+		HEIGHT = canvasPlaceholder.getBoundingClientRect().height * PIXEL_RATIO;
+		canvas.setAttribute('width', WIDTH);
+		canvas.setAttribute('height', HEIGHT);
+		canvas.style.top = canvasPlaceholder.getBoundingClientRect().top + "px";
+		canvas.style.left = canvasPlaceholder.getBoundingClientRect().left + "px";
+		canvas.style.width = (WIDTH / PIXEL_RATIO) + "px"
+		canvas.style.height = (HEIGHT / PIXEL_RATIO) + "px"
 		if (evt){ 
 			Menu.runSoon(); 
 		}
@@ -46,8 +52,8 @@
 	function _moveForward(distance){
 		var start = position;
 		position = {
-			x: cos(direction) * distance + start.x,
-			y: -sin(direction) * distance + start.y
+			x: cos(direction) * distance * PIXEL_RATIO + start.x,
+			y: -sin(direction) * distance * PIXEL_RATIO + start.y
 		};
 		if (pen){
 			ctx.lineStyle = color;
