Buenas, tengo un bucle que recorre un array en el cual pueden existir o no imagenes cargadas, el tema es que al cagar estas imagenes en un canvas y hacerlo de la manera que especifica en MSDN solo consigo cargar la ultima imagen el mismo numero de veces que imagenes tengo en el array. Esto sucede por que se pinta la imagen con el evento onload que es llamado al finalizar la carga de la pagina, por lo que el bucle ya ha terminado y por tanto solo tengo la informacion de la ultima iteracion.
for (var i=0; i<array.length; i++){
var data=array[i].campoImagen;
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, Window.posx,Window.posy);
DOMURL.revokeObjectURL(url);
}
img.src=url;
}
Ademas, otro problema es que de este modo las imagenes siempre me quedan dibujadas encima de los textos pues son las ultimas en cargarse en el canvas.
Alguna alternativa para cargar cada imagen en su correspondiente iteracion?.