CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
Nato
Nato

Reputation: 162

draw array of images to the canvas

I am trying to draw an array of images to the canvas element, my data:image is returning an empty image. 

var imgArray = ['images/image1.png','images/image2.png'];
        for(i = 0; i < 2; i++){
            var canvas = document.getElementById('textCanvas');
            var context = canvas.getContext("2d");
            var imageObj = new Image();
            imageObj.setAtX = i * 10;
imageObj.setAtY = i * 10;
imageObj.onload = function() {
 context.drawImage(this, this.setAtX, this.setAtY);
};
        }

    img = canvas.toDataURL("image/png");

Upvotes: 0

Views: 844

Answers (1)

Scimonster
Scimonster

Reputation: 33409

You never set the images' source:

var imageObj = new Image();
imageObj.src = imgArray[i]; // << addeed
imageObj.setAtX = i * 10;
imageObj.setAtY = i * 10;
imageObj.onload = function() {
 context.drawImage(this, this.setAtX, this.setAtY);
};

Upvotes: 1

Related Questions