I have a problem with jQuery's drawImage method. I'm trying to draw five cards to a canvas and wanted to do

so with a javascript array object. I thought I could populate my five cards to the screen with an array object. The script doesn't error out but the cards aren't drawn to the screen. 

When I do modify the method with a tag like img1 = new Image() and refer to that in the drawImage method it works just fine and will draw one card. Is my syntax wrong or am I going about it the wrong way. Help a newbie out if you can.

function drawCards()

{

    // Grab canvas add images to it.

    var canvas = $("#pokerTableCanvas1")[0];

var ctx = canvas.getContext("2d");

var cards = new Array();

cards[0] = new Image();

cards[1] = new Image();

cards[2] = new Image();

cards[3] = new Image();

cards[4] = new Image();

for(i=0;i<5;i++)

{

cards[i].onload = function(){

ctx.drawImage(cards[i],30,localPos);

}

cards[i].src = "cvimages/k_spades1.jpg";

localPos+=50;

}

//

}