CreateJS Getting Started Code with Retina Support

The following code snippet is the boilerplate to initial CreateJS library with device’s retina screen support.

class App {
constructor() {
this.canvas = document.getElementById("app-canvas");
this.stage = new createjs.Stage(this.canvas);
this.retinalize();
createjs.Ticker.setFPS(60);
// keep redrawing the stage.
createjs.Ticker.on("tick", this.stage);
createjs.Touch.enable(this.stage);
}
retinalize() {
let originalCanvasWidth = this.canvas.width;
let originalCanvasHeight = this.canvas.height;
let ratio = window.devicePixelRatio;
if (ratio === undefined)
return;
let height = this.canvas.getAttribute('height');
let width = this.canvas.getAttribute('width');
this.canvas.setAttribute('width', Math.round( width * ratio ) );
this.canvas.setAttribute('height', Math.round( height * ratio ) );
// Set CSS
this.canvas.style.width = width+"px";
this.canvas.style.height = height+"px";
this.stage.scaleX = this.stage.scaleY = ratio;
// save original width & height into stage
this.stage.width = originalCanvasWidth;
this.stage.height = originalCanvasHeight;
}
}

Makzan
I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.