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):
[js]
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;
}
[/js]
IE 10 doesn’t support devicePixelRatio, but you can get a resonable devicePixelRatio with this (include it before your CreateJS script, and call window.getDevicePixelRatio() instead of using the standard property):
[js]
/*! 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);
[/js]
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:
[css]
body {
margin:0;
padding:0;
}
canvas {
display: block;
}
[/css]
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
RT @Touvan: HiDPI/Retina for CreateJS (Flash Pro HTML5 Canvas): Adding HiDPI and Retina screen support to a CreateJS (Flash H… http://t.c…
Great tuturial. Thanks for explaining how to adding HiDPI and Retina screen support for Adobe Animate HTML5 Canvas.
Thanks Kevin, this worked for me.