Hi,
I want to load my images based on a variable.
I don't want to use a fixed name in the context.drawImage(images.a0,
so i want to load my pictures for example as in
for (z=0;z<3;z++){
context.drawImage(images[z], 100+(z*100), 30, 200, 137);
}
<canvas id="myCanvas" width="578" height="200"></canvas> <script> function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; // get num of sources for(var src in sources) { numImages++; } for(var src in sources) { images[src] = new Image(); images[src].onload = function() { if(++loadedImages >= numImages) { callback(images); } }; images[src].src = sources[src]; } } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var sources = { a0: 'http://eindtijdinbeeld.nl/EiB-Dispensationalisme/01.png', a1: 'http://upload.wikimedia.org/wikipedia/commons/f/f7/MetroDF_Linea_2.jpg', a2: 'http://www.sundayschoolleader.com/wp-content/uploads/2014/08/number-3.jpg' }; loadImages(sources, function(images) { context.drawImage(images.a0, 100, 30, 200, 137); context.drawImage(images.a1, 350, 55, 93, 104); });