dynamic image variable with onclick event

Question

I have several canvases. I also have several picture URLs. I want to draw all pictures on the canvas. There is a problem in the drawing function. Drawing the image only works when the image loads completely, but I have to draw the image as it loads. I wrote following code:

for (var i = 2; i < length; i++) {
    canvid[i] = "canv" + i;
    img[i] = new Image();

    img[i].src = "..\\images\\UploadImage\\"+ name + i + ".jpg";

    img[i].onload = function () { 
        var c = document.getElementById(canvId[i]);
        var cDraw = c.getContext("2d");
        cDraw.drawImage(img[i], 0, 0);
    };

I know this code has error, it's kind of pseudo code to show what I want.

score 0 · Answer 1 · answered Jun 04 '16 at 19:09

0

Put your logic in

$(documet).ready(function(){

   //logic
});

answered Jun 04 '16 at 19:09

Sagar

642
3
14

score 0 · Accepted Answer · edited May 23 '17 at 10:34

the answer is in following link

stack overflow link

when you want to call on click event on image variable you have to wait for it so you couldn't use loop you have to put next call on previous image on load event .

 var loadImages = function (imageURLarray) {
                if (!(startPage < pages))
                    return;
                canvid = "canv" + i;
                img.src = imageURLarray[startPage];
                // your top code
                img.onload = function (e) {
                    // code, run after image load
                    var c = document.getElementById(canvid);
                    var cDraw = c.getContext("2d");
                    cDraw.drawImage(img, 0, 0);
                    startPage++;
                    loadImages(imageURLarray);
                }
            }

            loadImages(imageURLarray);

dynamic image variable with onclick event

2 Answers2