This forum is read only and just serves as an archive. If you have any questions, please post them on

8 years ago by jizaymes


I've run into an issue thats led me down the path of having multiple canvases to overcome some deficiencies. First i'll state those which, if anyone has any help, may render my endeavor moot.

The game i'm working on has background layers and a layer on top of the entities layer so that I can have the feeling of being able to walk behind trees and such.

/><br />
<br />
I also have a graphical HUD which i've tried making as an Entity. Using it in this manner causes the HUD to be covered when walking behind any of the tree tops.<br />
<br />
<img src= this.backdrop = new ig.Image( 'media/backdrop.png' ); this.canvas = ig.$new('canvas'); this.canvas.height = ig.system.realHeight; this.canvas.width = ig.system.realWidth; this.context = this.canvas.getContext('2d');
draw() code:

	    	    this.oldValues = {
	    	        system: { 
	        	        context: ig.system.context
		            game: { 
	    	            screen: {

					ig.system.context = this.context;

// either of these both work if the context switch above is commented. 
//					this.backdrop.draw(,;
					ig.system.context.drawImage(,,, this.size.x, this.size.y );

<.. do stuff ..>

			        ig.system.context = this.oldValues.system.context;


	<canvas id="canvas"></canvas>
	<canvas id="hudLayer"></canvas>

8 years ago by StuartTresadern

Depends which way you want to go. If you just want the HUD entity always on top follow this thread

If you want / need to use off screen drawing to another canvas take a look at the following plugins / demos. The breakout clone creates the hud etc on an off screen canvas and only updates when the score / lives change which can help a lot with draw performance. The sample creates new background maps but you can use the same idea to add text / entities. The breakout clone also shows the always on top entity code when drawing the starburst.

8 years ago by jizaymes

Thanks for the information. I was able to get my above code working by changing

            this.canvas = ig.$new('canvas');


            this.canvas = document.getElementById('hudLayer');

though I ran into a plethora of other issues that made me roll back to the way that overlaps. I'll check out the 'draw it myself' method and see what I can do with that.


8 years ago by jizaymes

Sweet...the always-on-top trick worked! phew. no need for multiple canvases.

Thanks again
Page 1 of 1
« first « previous next › last »