Czarne płótno o zmienionym rozmiarze, nie do końca blaknące rysunki, z czasem czarne

Mam czarne płótno z elementami w środku. Chcę, aby rzeczy narysowane wewnątrz zanikały, z czasem, w kolejności, w jakiej zostały narysowane (FIFO). Działa to, gdy używam płótna, którego rozmiar nie został zmieniony. Po zmianie rozmiaru płótna elementy stają się białe.

Pytanie: Dlaczego białe plamki nie bledną całkowicie na czarno, gdy zmieniono rozmiar płótna? Jak mogę zmusić ich do blaknięcia na czarno w taki sam sposób, w jaki robią to, gdy nie zmieniłem rozmiaru płótna?

Oto kod, który pokazuje.http://jsfiddle.net/6VvbQ/35/

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(0, 0, 300, 150);

// Comment this out and it works as intended, why?
canvas.width = canvas.height = 300;

window.draw = function () {
    context.fillStyle = 'rgba(255,255,255,1)';
    context.fillRect(
        Math.floor(Math.random() * 300),
        Math.floor(Math.random() * 150),
        2, 2);
    context.fillStyle = 'rgba(0,0,0,.02)';
    context.fillRect(0, 0, 300, 150);

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

questionAnswers(3)

yourAnswerToTheQuestion