Create custom image object in canvas

Question

I am trying to create an object that will create an image and draw it on canvas. The reason I am not just the regular image object is that I want to know where the objects are place on the canvas for mouse actions.

Here is my constructor function:

function DisplayImg(src, x, y, w, h) {
            this.src = src;
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
        }

I create a draw function to draw it to the canvas:

DisplayImg.prototype.draw = function(context) {
            img = new Image();
            img.src = this.src;
            img.onload = function() {
            context.drawImage(img,this.x,this.y,this.w,this.h); 
            }
        }

I then make an API call to instagram and grab some photo urls and put them in an array. Here I am trying to loop through that array and create an object for each one, and draw it to the canvas. I can console.log the data and see the image src's so I know the data is there. This is the function I call once I get the data back:

function draw() {  
          for (var i = 0; i < srcArr.length; i++) { 
            var src = srcArr[i];
            x = Math.floor(Math.random()*8);
            y = Math.floor(Math.random()*8);
            var theImage = new DisplayImg(src,x,y,75,75); 
            theImage.draw(context);
          } 
        }

My logs return the correct data, but none of the images are drawn to the canvas. Any help is greatly appreciated.

Matt Ramey · Accepted Answer · 2012-08-16 03:12:33Z

1

First thing you should do is fix your prototype function:

DisplayImg.prototype.draw = function(context) {
    var display = this,
        img = new Image();
    img.onload = function() {
        context.drawImage(img,display.x,display.y,display.w,display.h); 
    }
    img.src = this.src;
}

You're passing garbage values to the context.drawImage function because "this" no longer applies to your DisplayImage instance inside of that onload function, this should remedy that.

Secondly, make sure you are actually passing a correct context through, not much I can help you there with. I made a fiddle that examples your code, but I had to change your "draw" function to make it sane: http://jsfiddle.net/yuaHF/2/

answered Aug 16, 2012 at 3:12

Matt Ramey

3181 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dotfury Over a year ago

Thanks for the insight, I can get some of the images to display now.

Collectives™ on Stack Overflow

Create custom image object in canvas

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related