[SOLUCIONADO] Canvas dentro de un Bucle

[goudden2]

Hola; saludos a todos. Tengo rato trasteando con el siguiente problema, y no termino d entender como puedo solventarlo, espero puedan ayudarme.

Necesito mostrar varias imagenes tipo galeria en contenedores Canvas, el tema esta que al hacer el bucle y cambiar el nombre del canvas y la ruta de la imagen no hace lo que quiero, es como si las variables no se limpiaran o la referencia fuera una sla y no por bucle, tengo un ejemplo sencilo de mi problema en fiddle en este link http://jsfiddle.net/goudden/apgc2jx1/1/ que estoy haciendo mal ????

[goudden2]

Ya encontré la solución, quizas otro se enrede como yo:

el canvas usa la ruta de la imagen no propiedad sino como referencia. Lo que hice fue crear un arreglo en Java Script y en el bucle cada imagen de la galeria hace referencia a cada posición de arreglo.

ele ejemplo está en: http://jsfiddle.net/goudden/uao6j69b/1/


CODIGO HTML:

Código HTML:

<canvas id="canvas0" width=300 height= 300 ></canvas>
<canvas id="canvas1" width=300 height= 300></canvas>
 

CODIGO JAVASCRIPT:

Código Javascript:

var canvas = [];
var context = [];
var imageObj = [];
 
 
canvas[0] = document.getElementById('canvas0');
context[0] = canvas[0].getContext('2d');
imageObj[0] = new Image();
 
      imageObj[0].onload = function() {
        context[0].drawImage(imageObj[0], 69, 50, 300, 300);
      };
      imageObj[0].src = 'http://4.bp.blogspot.com/-pKhu54F-gcU/T7jL0vt_FoI/AAAAAAAA_c4/WDTpcBEJq6Y/s1600/paisajes_de_montanas_azules.jpg';
 
 
// CANVAS 1
 
canvas[1] = document.getElementById('canvas1');
context[1] = canvas[1].getContext('2d');
imageObj[1] = new Image();
 
      imageObj[1].onload = function() {
        context[1].drawImage(imageObj[1], 69, 50, 300, 300);
      };
      imageObj[1].src = 'http://2.bp.blogspot.com/-OSVC5PTEAKU/TZNnUHaoJZI/AAAAAAAAApo/WcP3qSUPAoo/s1600/monta%2525C3%2525B1as%252520verdes%255B1%255D.jpg';
 

Saludos !!!!....