CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Sadikhasan
Sadikhasan

Reputation: 18600

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.drawImage(img, -170, -10, 140, 140);
}

My above code draw only 9(Nine) images but lastOne(10th) image not drawing on canvas. I tried above code but not getting success. Anyone can know solution for this problem.

Can any one help me to find out online JSFiddle Demo which draw image on canvas in loop.

Upvotes: 1

Views: 2510

Answers (2)

gugateider
gugateider

Reputation: 2057

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

Upvotes: 2

Emil S. J&#248;rgensen
Emil S. J&#248;rgensen

Reputation: 6366

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);
    }
  });

Upvotes: 2

Related Questions