HTML5 Canvas set z-index

Question

Is it possible to set the z-index of a drawn object in HTML5 canvas?

I am trying to get it so one object can be infront of a the \"player\" and another object is beh

Answer 1

A solution that I've found works for me (and gets rid of flickering, hurrah!) is to use two canvases. (or more)

I will assume you are making a game of some kind (since you mention a player) and use that as an example.

You can take a page from the way windows works and put a canvas first as a background with another canvas over it as your player canvas. You can mark the player canvas as 'dirty' or changed whenever it has been altered and only redraw the changed layer when needed. This means that you only update the second canvas when your player moves or takes an action.

This method can be taken even farther and you can add a third canvas for a HUD with gameplay stats on it that is only changed when the player's stats change.

The html might look something like this: