Drawing Image On Canvas In Loop Not Working

var canvas = document.getElementById('canvas'); wheel = canvas.getContext('2d'); for (var i = 0; i < 10; i++) { var img = new Image; img.src = image; wheel.drawI

Solution 1:

Perhaps your image isn't finished loading before your first draw attempt.

Here is the syntax to make sure your image has finished loading:

var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 1100;
canvas.height = 110;
var wheel = canvas.getContext("2d");
var img = document.createElement("img");
img.onload = function() {
  for (var i = 0; i < 10; i++) {
    wheel.drawImage(img, 5 + 110 * i, 5);
  }
};
img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";

EDIT 1 - PROMISES

Working with multiple images:

1. List sources
2. map to generates DOM nodes
3. Setup a Promise per DOM node in a Promise.all
4. Then draw images

var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 1100;
canvas.height = 110;
var wheel = canvas.getContext("2d");
var images = [
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=2&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=3&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=4&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=5&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=6&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=7&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=8&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=9&w=100&h=100",
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=10&w=100&h=100",
  ]
  .map(function(i) {
    var img = document.createElement("img");
    img.src = i;
    return img;
  });
Promise.all(images.map(function(image) {
    return new Promise(function(resolve, reject) {
      image.onload = resolve;
    });
  }))
  .then(function() {
    for (var i = 0; i < images.length; i++) {
      var img = images[i];
      wheel.drawImage(img, 5 + 110 * i, 5);
    }
  });

Solution 2:

I would do the similar approach to Emil, only difference having a method that loads them individually and once the image is loaded, try to load the next one and so on ...

take a look:

var canvas = document.getElementById("canvas");

// setting canvas size
canvas.height = window.innerHeight - 10;
canvas.width = window.innerWidth - 10;

var image_test = document.querySelector(".hidden");
var count = 0;
var total_images = 10;
var wheel = canvas.getContext("2d");      
function loadImage() { 
  var img = new Image();
  img.onload = function() { 
    wheel.drawImage( this , 105 * count , 0 , 100, 100);
    if( count < total_images ) { 
        count++;
      loadImage();
    }
  }
  // img.src = "image-" + count + ".jpg";
  img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";
}
loadImage();

https://jsfiddle.net/gugalondon/r5xw6u7L/7