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