Image Doesn't Show Up On Canvas

I'm experimenting with the canvas element, but for some reason it doesn't display my image. I use the following code: function Canvas() { this.field = function() { var battle

Solution 1:

pos_x and pos_y are undefined in your code. It works if you pass values for them to draw.grass():

draw.grass(0, 0);

DEMO

Tested in Chrome and Firefox.

Solution 2:

This may be because you need a context to draw on.

Try:

this.context = canvas.getContext('2d')

Then call your draw functions on the context object not the canvas object:

this.context.drawImage(img, specs.position_x, specs.position_y, specs.dimension_x, specs.dimension_y, pos_x, pos_y, specs.dimension_x, specs.dimension_y);

It also appears that your reference to canvas is wrong too, it should be this.canvas (or this.context) not just canvas, at least as I understand scope in javascript.