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:
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.arc(x, y, 20, 0, Math.PI*2, true);
    if (x < 0 || x > 300)
    if (y < 0 || y > 300)
        dy = -dy;
        x += dx;
        y += dy;

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

    Simple HTML5 Canvas Animation


Basic Canvas Example


You are reading an archived discussion.

Related Posts

Hello Friends please visit my website for Free microcontroller projects with source code & Circuit. Connect Nokia 5110 with Microcontroller to control devices. Binu