canvas work

playing around with canvas

by Oliver Kelso

HTML

<canvas id="demo-canvas" width="600px" height="400px"></canvas>

CSS

#demo-canvas{
    width:100%;
    background:#111;
}

JavaScript

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());


(function() {
    var canvas = document.getElementById('demo-canvas'),
        ctx = canvas.getContext('2d'),
        canvasWidth = canvas.width,
        canvasHeight = canvas.height,
        pixel = {
            x: Math.floor((Math.random() * 255) + 1),
            y: Math.floor((Math.random() * 255) + 1),
            speed: 50,
            count: 1000000000,
        };
    
    function drawPixel(){
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.fillStyle = "#111111";
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        
        ctx.beginPath();
        
        var radius = Math.floor((Math.random() * 50) + 10);
        var x = Math.floor((Math.random() * 255) + 1);
        var y = Math.floor((Math.random() * 255) + 1);
        //ctx.arc(pixel.x, pixel.y, radius, 0, Math.PI * 2, false);
        ctx.rect(x, y, radius, radius, Math.PI * 2, false);
        ctx.closePath();
        
        ctx.fillStyle = "#006699";
        ctx.fill();
    }
    
    function animatePixels(){
        //
    }
    
   ...