Forums » Help » Question regarding canvas css background-image vs impact.js canvas background painting

Hi all,

I'm rather new to impact.js, but recently I failed on setting the background-image using css property of the canvas elements in order to add some more complex (not tile-based) background to the game. I went through many threads in this forum when many solutions involving adding new layers in weltmeister or creating new entity for the background are discussed. But the thing is that whatever image I would add via impact.js functionality it would cause the canvas element to draw it on every update (or not?) and what I would like to do is to use browser's built-in rendering engine in order to render the background only once and then use canvas only for drawing moving parts leaving the whole rest of the space transparent. Please let me know whether it's possible in impact.js?

Don&039;t quote me on this, but I think the #canvas tag is special in that you can&039;t set it's background the same way you would a #div or p tag.

You will have to actually draw your background to the canvas. The easiest way to do this will be to do so from within ImpactJS.

You're correct that the background needs to be redrawn every frame, but that shouldn't be a problem. If your background is just a simple image, then draw it as you would anything else.

If there is a reason you're concerned about drawing the background each frame (perhaps it's complicated or is made up of several images), there is a performance trick you can do. You can create an off-screen canvas object, draw your background to it once, and then draw that canvas to your main canvas. This will cost a little upfront, but will be super fast after that.

Hope this helps a little.

So, there's this: http://stackoverflow.com/questions/5241365/how-to-set-the-background-image-of-a-html-5-canvas-to-png-image

Is that what you're looking for?

Really, though, until you know that it's a problem I wouldn't worry about it. One extra draw call on the canvas won't have a performance impact vs. the many others that you make for sprites, tiles, etc.

Thanks for replies, they were reallly helpful. I will then stick to your advise and don't bother with the performance issue caused by this one additional background redraw.