Time vs non-time
<script> var stage, timeCircle; function init() { stage = new createjs.Stage("demoCanvas"); timeCircle = new createjs.Shape(); timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40); timeCircle.y = 50; stage.addChild(timeCircle); // Add another circle that's tick based tickCircle = new createjs.Shape(); tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40); tickCircle.y = 160; stage.addChild(tickCircle); createjs.Ticker.addEventListener("tick", tick); createjs.Ticker.setFPS(20); } function tick(event) { // time based timeCircle.x = timeCircle.x + (event.delta)/1000*100; // Even default is set 20FPS, the lag is making the + 5 slower tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5 if (tickCircle.x > stage.canvas.width || timeCircle.x > stage.canvas.width) { timeCircle.x = 0; tickCircle.x = 0; } // Set both to left for reference stage.update(); } </script> <select onchange="createjs.Ticker.setFPS(Number(this.value));"> <option value="10">10 fps</option> <option value="20" selected>20 fps</option> <option value="30">30 fps</option> <option value="40">40 fps</option> <option value="50">50 fps</option> <option value="60">60 fps</option> </select><br> <canvas id="demoCanvas" width="500" height="200"> alternate content </canvas> <script> init(); </script>