Forums » Help » Multiple Canvas troubles

Hello,

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.

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: {
	        	            x: ig.game.screen.x,
	            	        y: ig.game.screen.y
	                	}
		            }
	    	    };


					ig.system.context = this.context;

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

<.. do stuff ..>

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

index.html

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

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

http://impactjs.com/forums/help/entity-thats-always-on-top

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.

http://impactjs.com/forums/code/dynamic-map-plugin

http://impactjs.com/forums/code/tile-value-plugin

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

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

to

            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.

Thanks

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

Thanks again