CODEWITHSUNDEEP
javascriptjquerycanvas
Sora
Sora

Reputation: 2551

drawing an image under another image in html5 canvas

I'm trying to draw a level field inside my canvas as u can see .the tank and the enemies images are being drawn underneath the field wish occurred to be a problem since the tank and the enemies should be moving above the filed image that's a jsfiddle : http://jsfiddle.net/seekpunk/B2nUs/40/

for (x = 0; x < cw; x += 28) {
         for (y = 0; y < ch; y += 28) {
             Tiles.add(new Tile(x, y, 0, 0));
         }
    }

Upvotes: 0

Views: 802

Answers (1)

Eric
Eric

Reputation: 18922

The content are rendered in the order you render it to the context. To draw the tank and enemies ontop of the game area, make sure to FIRST draw the game area (the tiles) and in the end draw the tank and enemies.

Sort of like:

// Draw all the tiles
ctx.drawImage(img....);

// Draw the enemies
ctx.drawImage(enemy...);

// Draw the tank
ctx.drawImage(tank...);

Upvotes: 2

Related Questions