How can I fill the canvas pixel by pixel?

Question

I am trying to set the colors of all the pixels on the canvas. I'm pretty sure I know how it works: first 4 values in canvas.getContext("2d").getImageData.data refer to the r, g, b, and a of the first pixel, second 4 go to second pixel, and so on. I would like to know what is wrong with this code:

function draw()
{
    var cnvs = document.getElementById("CanvasFlynn"); //Assume it's 2x2 pixels
    var cont  = cnvs.getContext("2d");
    var imdt  = cont.getImageData(0,0,2,2);
    var r     = [ 255 , 0 , 0 , 255 ];
    var g     = [ 0 , 255 , 0 , 255 ];
    var b     = [ 0 , 0 , 255 , 255 ];
    var a     = [ 1 , 1 , 1 , 1 ];
    var index = 0;
    for ( var i = 0 ; i < imdt.data.length ; i++ )
    {
        index              = 4*i;
        imdt.data[index]   = r[i];
        imdt.data[index+1] = g[i];
        imdt.data[index+2] = b[i];
        imdt.data[index+3] = a[i];
    }
}

If anyone could tell me why this doesn't change the canvases pixel colors, that would rock (I don't actually use a 2x2 cavas, that was just to serve as an example).