Black resized canvas not completely fading drawings to black over time

Question

I have a black canvas with things being drawn inside it. I want the things drawn inside to fade to black, over time, in the order at which they are drawn (FIFO). This works if I

Answer 1

I don't know if i have undertand you well but looking at you fiddle i think that, for what you are looking for, you need to provide the size of the canvas in any iteration of the loop. If not then you are just taking the initial values:

EDIT

You can do it if you apply a threshold filter to the canvas. You can run the filter every second only just so the prefromanece is not hit so hard.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(0,0,300,150);
//context.globalAlpha=1;
//context.globalCompositeOperation = "source-over";


var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

canvas2.width=canvas2.height=canvas.width;

window.draw = function(){
    var W = canvas2.width;
    var H = canvas2.height;
    context2.fillStyle='rgba(255,255,255,1)';
    context2.fillRect(
        Math.floor(Math.random()*W),
        Math.floor(Math.random()*H),
        2,2);
    context2.fillStyle='rgba(0,0,0,.02)';
    context2.fillRect(0,0,W,H);

    context.fillStyle='rgba(0,0,0,1)';
    context.fillRect(0,0,300,150);
    context.drawImage(canvas2,0,0,300,150);

    setTimeout('draw()', 1000/20);
}
setTimeout('draw()', 1000/20);

window.thresholdFilter = function () {
    var W = canvas2.width;
    var H = canvas2.height;
    var i, j, threshold = 30, rgb = []
    ,   imgData=context2.getImageData(0,0,W,H), Npixels = imgData.data.length;

    for (i = 0; i < Npixels; i += 4) {
        rgb[0] = imgData.data[i];
        rgb[1] = imgData.data[i+1];
        rgb[2] = imgData.data[i+2];
        if (    rgb[0] < threshold &&
                rgb[1] < threshold &&
                rgb[2] < threshold
        ) {
           imgData.data[i] = 0;
           imgData.data[i+1] = 0;
           imgData.data[i+2] = 0;
        }
    }

    context2.putImageData(imgData,0,0);
};

setInterval("thresholdFilter()", 1000);

Here is the fiddle: http://jsfiddle.net/siliconball/2VaLb/4/