Javascript - How to Generate an Array of Image Elements for Canvas Rendering?

Question

Javascript - How to Generate an Array of Image Elements for Canvas Rendering?

Struggling to craft an array of image objects and load them in a canvas after the window has fully loaded.

Take a look at the code I've written:

var canvasObj = document.getElementById('myCanvas');
var ctx = canvasObj.getContext('2d');
var imgsrcs = ["1.png", "2.png", "3.png"];
var imgs = [];
for(var i=0; i<imgsrcs.length; i++){
    imgs[i] = new Image();
    imgs[i].onload = function () {
        ctx.drawImage(imgs[i], xb,yb);
    }
    imgs[i].src = imgsrcs[i];
}

However, upon checking the console, I encountered this error message:

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
ctx.drawImage(imgs[i], xb,yb);

Can someone help me identify the issue here?

Your assistance is greatly appreciated.

javascript canvas

Answer 1

Answer №1

When the onload event is triggered, the for-loop has already iterated, causing the value of i to be length+1. Since there is no element at index length+1, undefined is passed as the first argument for ctx.drawImage

Ensure to utilize the this context in the drawImage method where this refers to the Image-Object

var canvasObj = document.getElementById('myCanvas');
var ctx = canvasObj.getContext('2d');
var imgsrcs = ["http://i.imgur.com/gwlPu.jpg", "http://i.imgur.com/PWSOy.jpg", "http://i.imgur.com/6l6v2.png"];
var xb = 0,
  yb = 0;
var imgs = [];
for (var i = 0; i < imgsrcs.length; i++) {
  imgs[i] = new Image();
  imgs[i].onload = function() {
    console.log(imgs[i]); //Check this value
    ctx.drawImage(this, xb, yb);
    xb += 50;
    yb += 50;
  }
  imgs[i].src = imgsrcs[i];
}

<canvas id="myCanvas"></canvas>

Answer 2

When the onload event is triggered, the for-loop has already iterated, causing the value of i to be length+1. Since there is no element at index length+1, undefined is passed as the first argument for ctx.drawImage

Ensure to utilize the this context in the drawImage method where this refers to the Image-Object

var canvasObj = document.getElementById('myCanvas');
var ctx = canvasObj.getContext('2d');
var imgsrcs = ["http://i.imgur.com/gwlPu.jpg", "http://i.imgur.com/PWSOy.jpg", "http://i.imgur.com/6l6v2.png"];
var xb = 0,
  yb = 0;
var imgs = [];
for (var i = 0; i < imgsrcs.length; i++) {
  imgs[i] = new Image();
  imgs[i].onload = function() {
    console.log(imgs[i]); //Check this value
    ctx.drawImage(this, xb, yb);
    xb += 50;
    yb += 50;
  }
  imgs[i].src = imgsrcs[i];
}

<canvas id="myCanvas"></canvas>

Javascript - How to Generate an Array of Image Elements for Canvas Rendering?

Answer №1

Similar questions

Utilize AJAX, jQuery, and Symfony2 to showcase array information in a visually appealing table format

refresh the localstorage array using vanilla JavaScript

Path not being rewritten upon page refresh in the @Nuxtjs/proxy module

Retrieve all entries in MongoDB using Mongoose where a particular date falls within a specified date range

Scrolling the Html5 canvas smoothly without the need for constant re-rendering

Tips for submitting a form and retrieving session count without the need to refresh the page after submitting the form

Troubleshooting Problems with Angular Directive Parameters

Tabs fail to load any content within their designated tab-panes

If the size property varies while the ID keys remain constant, then the item can be added to the cart

Seeking the location of the `onconnect` event within the Express framework

JavaScript Subscribe / Unsubscribe Button

Obtaining page information from a frame script in e10s-enabled Firefox: A guide

Can I use Mongoose to apply a filter to this request?

HTML: Ensure that a user fills out a minimum of one text box before submission

Build a dynamic table by leveraging JSON with the power of JavaScript and HTML

When sending large amounts of data using JQuery's ajax function with the POST method, it may not send the

Hover shows no response

What is the best way to retrieve "text" from a function using JavaScript with Selenium web driver?

Stop the stream coming from getUserMedia

Using Typescript to handle the return value of asynchronous functions