Canvas Animation Example

by Denise Nepraunig

HTML

<canvas id="canvas" width="500" height="400" style="border:1px solid #000000;"></canvas>

JavaScript

// get the theory behind:
// http://nepraunig.com/wp/?p=28

// grab the canvas and context
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// inital coordinates of the black square
var x = 0;
var y = 50;

// width and height of the square
var width = 10;
var height = 10;

function animate() {
    // clear
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // draw
    ctx.fillRect(x, y, width, height);
    
    // update
    x++;

    // repeat animation if square is within the canvas borders
    // 490 = canvas width 500 - width 10 of the square
    if(x <= 490) {
        setTimeout(animate, 33);
    }
}
// call the animate function manually for the first time
animate();