lcg #007:1

two shapes with CreateJS

HTML

<canvas id="myCanvas" width="300" height="200"></canvas>

CSS

canvas {
    border: 1px solid #000000;
}

JavaScript

var stage = new createjs.Stage("myCanvas");

var c = new createjs.Graphics().f("red").dc(70, 70, 60);
var r = new createjs.Graphics().f("yellow").dr(0, 0, 70, 50);

var s1 = new createjs.Shape(c);
var s2 = new createjs.Shape(r);

stage.addChild(s1);
stage.addChild(s2);

createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setInterval(25);
createjs.Ticker.setFPS(40);

var dx = 5;
var dy = 2;

function handleTick() {
    s2.x = s2.x + dx;
    s2.y = s2.y + dy;
    
    if ( s2.x > (stage.canvas.width - 70) ) {
        dx = -dx;
    }
    if ( s2.x < 0 ) {
        dx = -dx;
    }
    
    if ( s2.y > (stage.canvas.height - 50) ) {
        dy = -dy;
    }
    if ( s2.y < 0 ) {
        dy = -dy;
    }
    
    stage.update();
}