CreateJS starting point with Retina support

createjs-starting-point-with-retinalize.js

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;
  }
}