html5 drawing multiple canvas images - html

Question

i've got a problem with canvas in html. I want to draw multiple canvas images.
I have created a loop which creates multiple canvas and then i want to draw in each canvas an image.
for (var i = 1; i <= playerStuff.MovingCards.length; i++){
$("#playersField").append("<canvas id='movingCardsField"+i+"' height='"+movingCardSizeY+"'\n\
width='"+movingCardSizeX+"'\n\
data='"+playerStuff.MovingCards[i-1].movePoints+"'></canvas>");
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField'+i).getContext("2d");
imgObj.onload = function(){
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name;
}
The result is that only the last canvas has a drawn image. What am I missing here?

Answer 1

Please dont use JQuery for this. In generally i'm not a friend of JQuery but thats my personally opinion,but here you should really dont useit, use the DOM its much more faster.
var playersField=document.getElementById("playersField");
var canvasElements=new Array ();
var canvasElement, drawField,imgObj;
var drawFields=new Array ();
for (var i = 0; i <= playerStuff.MovingCards.length; i++)
{
canvasElement=document.createElement ("canvas");
canvasElement.height=movingCardSizeY;
canvasElement.width=movingCardSizeX;
canvasElement.data=playerStuff.MovingCards[i-1].movePoints;
playersField.appendChild(canvasElement);
drawField=canvasElement.getContext("2d");
drawFields.push (drawField);
imgObj = new Image();
imgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name;
imgObj.index=i;
imgObj.onload = function (){
drawFields[this.index].drawImage(this, 0,0);
};

Answer 2

that is becouse onload y asinchronous, when al the iterations of the for has ended, the onload is probably that has not been called. then drawField variable is the last element. to solve this in a fast way (but not the cleanest solution)
the scope of a varaible is not as it could be in c++ or other languages.
for (var i = 1; i <= playerStuff.MovingCards.length; i++){
(function(element) {
$("#playersField").append("<canvas id='movingCardsField"+i+"' height='"+movingCardSizeY+"'\n\
width='"+movingCardSizeX+"'\n\
data='"+element.movePoints+"'></canvas>");
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField'+i).getContext("2d");
imgObj.onload = function(){
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/"+element.name;
})(playerStuff.MovingCards[i - 1]);
}
this may do the trick, more or less, I didn't check twice the code
btw is not very efficient also
this should be something better
var domElement = $("#playersField");
var canvasStart = "<canvas id='movingCardsField";
var canvasEnd = "' height='"+movingCardSizeY + "'width='" + movingCardSizeX + "' data='" + element.movePoints + "'></canvas>";
function createCanvas(element) {
var canvas = canvasStart + (i + 1) + canvasEnd;
domElement.append(canvas);
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField' + (i + 1)).getContext("2d");
imgObj.onload = function() {
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/" + element.name;
}
for (var i = 0; i < playerStuff.MovingCards.length; i++) {
createCanvas(playerStuff.MovingCards[i]);
}