Introduction to Canvas

How to move a square across a canvas element, by clicking your mouse...

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>



<script type='text/javascript'>
/// YOUR JACAVASCRIPT GOES HERE, SEE BELOW....
</script>
</head>
<body>
    
<canvas id='myCanvas' width='600' height='600'></canvas>


</body>
</html>

window.requestAnimFrame = (function(callback){

   return window.requestAnimationFrame ||
   window.webkitRequestAnimationFrame ||
   window.mozRequestAnimationFrame ||
   window.oRequestAnimationFrame ||
   window.msRequestAnimationFrame ||
   function(callback){
       window.setTimeout(callback, 1000 / 60);
   };

})();

function drawRect(myRectangle){

   context.beginPath();
   context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
   context.fillStyle = "#8ED6FF";
   context.fill();

}

function animate(lastTime, myRectangle, animProp){

   if (animProp.animate) {

       // update
       var date = new Date();
       var time = date.getTime();
       var timeDiff = time - lastTime;
       var linearSpeed = 100;
       // pixels / second
       var linearDistEachFrame = linearSpeed * timeDiff / 10000;
       
       var currentX = myRectangle.x;

       if (currentX < canvas.width - myRectangle.width ) {
           var newX = currentX + linearDistEachFrame;
           myRectangle.x = newX;
       }

       lastTime = time;

       // clear
       context.clearRect(0, 0, canvas.width, canvas.height);

       // draw
       drawRect(myRectangle);

       // request new frame
       requestAnimFrame(function(){
           animate(lastTime, myRectangle, animProp);
       });
   }

}

$(document).ready(function() {

   //real canvas element
   canvas = document.getElementById("myCanvas");
   context = canvas.getContext("2d");

   var myRectangle = {
       x: 0,
       y: 50,
       width: 100,
       height: 50    };

   /*
    * make the animation properties an object
    * so that it can be modified by reference
    * from an event
    */
   var animProp = {
       animate: false
   };

   // add click listener to canvas
   $("#myCanvas").click( function(){
       if (animProp.animate) {
           animProp.animate = false;
       }
       else {
           animProp.animate = true;
           var date = new Date();
           var time = date.getTime();
           animate(time, myRectangle, animProp);
       }
   });

   drawRect(myRectangle);

});