Change image of an object - html

Question

I want to make so that when I run a function it changes the image of objects in a function and I thought this would work
for(var i = 0; i < heads.length; i++){heads[i].src = ram_head;}
with ram_head equaling a string with the url but when I run the code the image does not change at all when I run the function.
Example of the code: http://jsfiddle.net/themagicalcake/URvA7

Answer 1

Here's code that:
creates an array of image objects (heads)
assigns the same image URL to all of those image objects (rams_head)
and when each image has fully loaded draws that image to the canvas.
Example code and a Demo: http://jsfiddle.net/m1erickson/5DXe7/
var ram_head="https://dl.dropboxusercontent.com/u/139992952/multple/RAMDISEGNO.jpg";
var heads=[];
heads.push(new Image());
heads.push(new Image());
for(var i=0;i<heads.length;i++){
heads[i].onload=function(){
ctx.drawImage(this,this.x,10);
}
heads[i].x=i*100;
heads[i].src=ram_head;
}

Answer 2

I see three issues with the code you've now linked to:
When you set the .src of an Image object, you can't use that image to draw with until the new .src URL image has loaded. If you want to change the .src and then draw, you have to handle the onload event and draw when that fires.
In your onkeydown handler, you are setting heads[i].src, but the image object is heads[i].img so the .src of the image would be heads[i].img.src.
Since you aren't displaying native <img> tags in the DOM, but are instead drawing the image yourself, after you change the .src of the image and then wait for that new image to load, if you want the image to display in your drawing context, you have to redraw it yourself. I won't just redraw just because you changed the .src.