drawImage not working

Question

I have a Sprite prototype that has a constructor function...

function Sprite(img) {
    for (var property in img) this[property] = image[property];
}

...that takes in an Image object and makes a copy of it. Now I'm trying to draw the Sprite using drawImage:

Sprite.prototype.draw = function(ctx, x, y) {
    ctx.drawImage(this, x, y);
}

this gives me an error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

however if I use the actual Image object and otherwise the same exact code i.e.:

Sprite.prototype.draw = function(ctx, x, y) {
    ctx.drawImage(img, x, y);
}

it works exactly as it should(img is the global name for the Image object).

This is the entire code for the Sprite prototype. I don't understand what difference is causing this to happen as I've only added the one function to Sprite; draw.

Answer 1

I suspect you mean:

 this[property] = img[property]

Other than that I think your copy is shallower than you need. Check out this discussion to put the prototype methods into your copy. How do I correctly clone a JavaScript object?

Finally I would caution, unless you are altering the images somehow, it's more efficient to reuse the same image. Have canvas objects reference the same image.