Simple HTML5 Canvas Animation

Hi friends,
I thought of sharing a simple canvas animation to make a ball bounce within a square. We are going to use MooTools library in this. Okay, we have three parts:
1. HTML
2. CSS
3. JavaScript

Lets start with the HTML (just the content):

    

        
Simple HTML5 Canvas Animation
        
    

Lets do some styling using CSS:

body {font: 11pt/14pt Segoe UI, Myriad Pro, Calibri, Tahoma;}
#container {text-align: center;}
#myCanvas {background: #fff; border: 1px solid #cbcbcb; text-align: center;}

Now comes the JavaScript part (Just the onLoad JS):

var context;
var dx = 4;
var dy = 4;
var y = 150;
var x = 10;
function draw(){
    context = myCanvas.getContext('2d');
    context.clearRect(0, 0, 300, 300);
    context.beginPath();
    context.arc(x, y, 20, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
    if (x < 0 || x > 300)
        dx=-dx;
    if (y < 0 || y > 300)
        dy = -dy;
        x += dx;
        y += dy;
    }
setInterval(draw,10); 

Now the complete code with linking the MooTools library... 😀

    
    
    
    



    

        
Basic Canvas Example