Canvas Animations playground

by Michał Belka

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

canvas {
    border: 1px red solid;
}

JavaScript

var counter = 0;
var limit = 150;

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.clearRect(0,0,300,300); // Clear canvas
    // for (var x = 0.5; x < 300; x += 10) {ctx.moveTo(x, 0);ctx.lineTo(x, 300);}for (var y = 0.5; y < 300; y += 10) {ctx.moveTo(0, y);ctx.lineTo(300, y);}ctx.strokeStyle = "#ddd";ctx.stroke(); // Grid
    
    var g = counter;
    var b = 255-g;
    
    ctx.fillStyle = 'rgb(0,'+g+','+b+')';
    ctx.fillRect(10+counter, 10+counter, 100, 100);
    
    counter++;
    if (counter <= limit) {
        window.requestAnimationFrame(draw);
    }
}

document.addEventListener('DOMContentLoaded', draw, false);