snippet - canvas...

gistfile1.js

// Rascunho...
var canvas = null,
    context = null,
    bufferCanvas = null,
    bufferCanvasCtx = null,
    flakeArray = [],
    flakeTimer = null,
    maxFlakes = 200;

var Flake = (function() {
    this.x = Math.round(Math.random() * context.canvas.width);
    this.y = -10;
    this.drift = Math.random();
    this.speed = Math.round(Math.random() * 5) + 1;
    this.width = (Math.random() * 3) + 2;
    this.height = this.width;
})

var addFlake = (function() {
    flakeArray[flakeArray.length] = new Flake();
    if (flakeArray.length == maxFlakes)
    clearInterval(flakeTimer);
})

var blank = (function() {
    bufferCanvasCtx.fillStyle = "#330033";
    bufferCanvasCtx.fillRect(0,0,bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
})

var animate = (function() {
    Update();
    Draw();
})

var Update = (function() {
    for (var i = 0; i < flakeArray.length; i++) {
        if (flakeArray[i].y < context.canvas.height) {
            flakeArray[i].y += flakeArray[i].speed;
            if (flakeArray[i].y > context.canvas.height)
            flakeArray[i].y = -5;
            flakeArray[i].x += flakeArray[i].drift;
            if (flakeArray[i].x > context.canvas.width)
            flakeArray[i].x = 0;
        }
    }
})

var Draw = (function() {
    context.save();
    
    // cria uma região de corte
    
    bufferCanvasCtx.beginPath();
    bufferCanvasCtx.fillStyle="green";
    bufferCanvasCtx.fillRect(0,0,bufferCanvas.width,bufferCanvas.height);
    bufferCanvasCtx.arc(bufferCanvas.width/2,bufferCanvas.height/2,bufferCanvas.height/3,0,2*Math.PI);
    bufferCanvasCtx.clip();
    
    blank();

    for (var i = 0; i < flakeArray.length; i++) {
        bufferCanvasCtx.fillStyle = "white";
        bufferCanvasCtx.fillRect(flakeArray[i].x,flakeArray[i].y,flakeArray[i].width,flakeArray[i].height);
    }

    // copia toda a imagem processada a partir da tela
    context.drawImage(bufferCanvas, 0,0,bufferCanvas.width, bufferCanvas.height);
    context.restore();
})

var init = (function() {
    canvas = document.getElementById('testeCanvas');
    context = canvas.getContext("2d");

    bufferCanvas = document.createElement("canvas");
    bufferCanvasCtx = bufferCanvas.getContext("2d");
    bufferCanvasCtx.canvas.width = context.canvas.width;
    bufferCanvasCtx.canvas.height = context.canvas.height;

    // inicializa os retângulos
    flakeTimer = setInterval(addFlake, 200);

    Draw();

    setInterval(animate, 30);
}());
​