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):<\/p>\n
[js]
\nif (window.devicePixelRatio) {
\n\t\/\/ grab the width and height from canvas
\n\tvar height = canvas.getAttribute(‘height’);
\n\tvar width = canvas.getAttribute(‘width’);
\n\t\/\/ reset the canvas width and height with window.devicePixelRatio applied
\n\tcanvas.setAttribute(‘width’, Math.round(width * window.devicePixelRatio));
\n\tcanvas.setAttribute(‘height’, Math.round( height * window.devicePixelRatio));
\n\t\/\/ force the canvas back to the original size using css
\n\tcanvas.style.width = width+"px";
\n\tcanvas.style.height = height+"px";
\n\t\/\/ set CreateJS to render scaled
\n\tstage.scaleX = stage.scaleY = window.devicePixelRatio;
\n}
\n[\/js]<\/p>\n
IE 10 doesn’t support devicePixelRatio, but you can get a resonable devicePixelRatio with this<\/a> (include it before your CreateJS script, and call window.getDevicePixelRatio() instead of using the standard property):<\/p>\n [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:<\/p>\n [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).<\/p>\n Some Notes:<\/p>\n Relevant info for devicePixelRatio and supporting HiDPI \/ Retina displays<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" 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 … Continue reading “HiDPI\/Retina for CreateJS (Flash Pro HTML5 Canvas)”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[211,188],"tags":[184,185,186,47,227,35,187],"_links":{"self":[{"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/posts\/4365"}],"collection":[{"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/comments?post=4365"}],"version-history":[{"count":3,"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/posts\/4365\/revisions"}],"predecessor-version":[{"id":4449,"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/posts\/4365\/revisions\/4449"}],"wp:attachment":[{"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/media?parent=4365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/categories?post=4365"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.unfocus.com\/wp-json\/wp\/v2\/tags?post=4365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\/*! GetDevicePixelRatio | Author: Tyson Matanich, 2012 | License: MIT *\/
\n(function (window) {
\n\twindow.getDevicePixelRatio = function () {
\n\t\tvar ratio = 1;
\n\t\t\/\/ To account for zoom, change to use deviceXDPI instead of systemXDPI
\n\t\tif (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
\n\t\t\t\/\/ Only allow for values > 1
\n\t\t\tratio = window.screen.systemXDPI \/ window.screen.logicalXDPI;
\n\t\t}
\n\t\telse if (window.devicePixelRatio !== undefined) {
\n\t\t\tratio = window.devicePixelRatio;
\n\t\t}
\n\t\treturn ratio;
\n\t};
\n})(this);
\n[\/js]<\/p>\n
\nbody {
\n\tmargin:0;
\n\tpadding:0;
\n}
\ncanvas {
\n\tdisplay: block;
\n}
\n[\/css]<\/p>\n\n