Cómo determinar cuándo ha terminado de cargarse un lienzo.

Así que estaba haciendo un lienzo bastante grande que estaba lleno de 1x1 píxeles, y quería hacer una pantalla de carga para él. El problema después de que el bucle que llena el lienzo termina, alerta de que ha terminado de cargarse, pero el lienzo no ha cambiado realmente. Hice unajsfiddle aquí para demostrar. ¿Cómo puedo saber cuándo se ha cargado realmente el lienzo con javascript o Jquery, y qué está causando este comportamiento?

var ctx=document.getElementById('canvas').getContext('2d');
for(var x=1;x<600;x++){
    for(var y=1;y<600;y++){
        var color= '#' + Math.floor (Math.random() * 16777215).toString(16);
        ctx.fillStyle=color;
        ctx.fillRect(x,y,1,1);
    }
}
alert('done!');

Respuestas a la pregunta(2)

Su respuesta a la pregunta