HiDPI/Retina for CreateJS (Flash Pro HTML5 Canvas)

Adding HiDPI and Retina screen support to a CreateJS (Flash HTML5 canvas publish with EaselJS) is easy enough. Just add this code after where the stage is defined in your published html file (either inside the generated init function, or handleComplete if there are external assets to load):

if (window.devicePixelRatio) {
	// grab the width and height from canvas
	var height = canvas.getAttribute('height');
	var width = canvas.getAttribute('width');
	// reset the canvas width and height with window.devicePixelRatio applied
	canvas.setAttribute('width', Math.round(width * window.devicePixelRatio));
	canvas.setAttribute('height', Math.round( height * window.devicePixelRatio));
	// force the canvas back to the original size using css
	canvas.style.width = width+"px";
	canvas.style.height = height+"px";
	// set CreateJS to render scaled
	stage.scaleX = stage.scaleY = window.devicePixelRatio;
}

IE 10 doesn’t support devicePixelRatio, but you can polyfill devicePixelRatio with this (include it before your CreateJS script):

/*! GetDevicePixelRatio | Author: Tyson Matanich, 2012 | License: MIT */
(function (window) {
	window.getDevicePixelRatio = function () {
		var ratio = 1;
		// To account for zoom, change to use deviceXDPI instead of systemXDPI
		if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
			// Only allow for values > 1
			ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
		}
		else if (window.devicePixelRatio !== undefined) {
			ratio = window.devicePixelRatio;
		}
		return ratio;
	};
})(this);

If you like to load your CreateJS based animation in an iframe (I do) and the canvas content is the only content, you may also want to add some styles to avoid scrollbars and extra padding:

body {
	margin:0;
	padding:0;
}
canvas {
	display: block;
}

Before making these edits, I recommend copying the main html page, so that you don’t have to worry about the publisher wiping out your changes when you publish again (if certain things change, you may need to reintegrate your changes).

Some Notes:

  • Some (slightly) older versions of Safari on OSX with Retina screens seemed to automatically apply a pixel doubling to canvas elements, so this might be redoubling again (I’m really not sure). It doesn’t seem to do this in the latest version though.
  • If you use “cacheAsBitmap” the content will be cached at the normal resolution. If you can find the place in code where that’s being set, you can actually apply the devicePixelRatio multiplier there by passing it in as a variable to the function that sets CAB, but CreateJS does not do this by default.

Relevant info for devicePixelRatio and supporting HiDPI / Retina displays

Published by

Kevin Newman

I'm the lead developer at adcSTUDIO located in Kingston NY (in Livingston Manor NY before that). I do all kinds of things there, from robust server side work to the much more enjoyable client side development in HTML/JavaScript/Flash (RIAs, HTML5, etc.) and all the other tech-buzz-phrases of the moment. My brother came up with the idea for unFocus.com which was originally meant be a place to discuss and blog about whatever topics we both found interesting, from politics to technology, to art and design. Time was scarce, and I need a place to host History Keeper, and unFocus Projects - a sub focus of unfocus.com was born, and eventually migrated to the font page. Oh, and I'm on Twitter (@Touvan) and Google+.

One thought on “HiDPI/Retina for CreateJS (Flash Pro HTML5 Canvas)”

Leave a Reply

Your email address will not be published. Required fields are marked *