JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.1.min.js"></script>
<canvas id="game" width="480" height="568"></canvas>
JavaScript
var g = function (elm) {
var stage, icon, w, h,
matrix, manifest, loader;
var tick = function (event) {
var deltaS = event.delta / 1000;
icon.x = (((icon.x + 128 + w)-deltaS*100) % w) - 128;
stage.update(event);
};
this.init = function () {
stage = new createjs.Stage(elm);
createjs.Touch.enable(stage);
w = stage.canvas.width;
h = stage.canvas.height;
matrix = new createjs.Matrix2D();
matrix.scale(w/h, w/h);
manifest = [
{src: 'lua-logo.gif', id: 'icon'}
];
loader = new createjs.LoadQueue(false, 'http://www.lua.org/images/');
loader.addEventListener('complete', this.handleComplete);
loader.loadManifest(manifest);
};
this.handleComplete = function () {
var iconImg = loader.getResult('icon');
icon = new createjs.Shape();
icon.graphics.beginBitmapFill(iconImg, 'no-repeat', matrix).drawRect(0, 0, iconImg.width, iconImg.height);
icon.tileW = iconImg.width;
icon.y = 15;
icon.x = w;
stage.addChild(icon);
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener('tick', tick);
};
};
var game = new g('game');
game.init();