Page History

<script>
     
    var stage, timeCircle;
    function init() {
        stage = new createjs.Stage("demoCanvas");
         
        timeCircle = new createjs.Shape();
        timeCircle.graphics.beginFill("red").drawCircle(0, 50, 40);
        // timeCircle.y = 50;
        stage.addChild(timeCircle);
         
        createjs.Ticker.addEventListener("tick", tick);
        // createjs.Ticker.setFPS(60);
    }
     
    function tick(event) {
		timeCircle.alpha = 1;
		var pt = timeCircle.globalToLocal( stage.mouseX, stage.mouseY );
		if (!timeCircle.hitTest( pt.x, pt.y ))
		{ 
	        // time based
    	    timeCircle.x = timeCircle.x + (event.delta)/1000*100;
        	if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }

			timeCircle.alpha = 0.2;
		}

        stage.update();
    }
</script>
 
<canvas style="border:1px" id="demoCanvas" width="500" height="200">
    alternate content
</canvas>
  
<script>
    init();
</script>