HTML5 canvas performance enhancements

Question

I am working on a javascript canvas game and I would like to improve the performance of the game. I am reading some articles about how to achieve better performance - one technique being pre-rendering.

Does it make sense to render every object, each of which has a texture, to it's own separate canvas element? Here is an example of an entity I am rendering:

    fruitless.ctx.save();
        fruitless.ctx.translate(this.body.GetPosition().x,this.body.GetPosition().y);
        fruitless.ctx.rotate(this.body.GetAngle());
        fruitless.ctx.scale(this.scale.x, this.scale.y);

        fruitless.ctx.drawImage(this.texture, ... )
        this.face.draw();
    fruitless.ctx.restore();

So essentially I am running the drawImage() function each iteration... Pre-rendering suggests this drawImage() should be done in the initialisation (just once) - is that right?

I always recommend the following article: Improving HTML5 Canvas Performance. — Gustavo Carvalho
– Gustavo Carvalho, Commented May 20, 2013 at 0:45

markE · Accepted Answer · 2013-05-19 19:00:17Z

2

Hard to give specific recommendations without knowing more...but here's a start:

Put any static background elements in an html image and lay that image down first. Scroll the background image if it is static but larger than your game viewport.
Sort animated elements by when they need to animate into several groups. So sun and cloud elements that animate on frame#5 will be one group. A grape-man and raison-man that animate every frame will be in a different group. Create a canvas for each of these several groups.
Put infrequently animated elements on a sprite-sheet.
Put frequently animated elements in their own image object.
Put frequently re-textured elements in their own offscreen canvas and re-texture there. Here's the trade: canvas's operate poorly on mobile, so you don't want a lot of canvases on mobile. But pre-rendering all variations of textures into image objects takes up a lot of memory.

Bottom line:

Pre-rendering will undoubtedly give you a performance boost.

But you need to test various pre-rendering strategies to see which works best on which device

answered May 19, 2013 at 19:00

markE

106k11 gold badges174 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jackson Over a year ago

Thanks Mark. I definitely need to fix up some of my static background images... Some of them are 1000px wide

Gustavo Carvalho Over a year ago

@Jackson: I'd like to add: you need to test various optimizing strategies and rendering methods to see which works best on which device. Certain optimizations don't work as expected in some browsers and some rendering methods might slow down the performance. For instance, draw text on canvas using context.fillText is ULTRA SLOW in many mobile browsers. If you use any pre-render technic you'll notice great performance boost in that case.

Jarrod · Accepted Answer · 2013-05-20 03:47:49Z

0

To answer this question:

Does it make sense to render every object, each of which has a texture, to it's own separate canvas element? Here is an example of an entity I am rendering:

Well, that depends. How many are there? and what are they doing?

If they're all whizzing around all the time, then you might as well keep them all on the same canvas element as, regardless, this will be consistently updated.

If some are static, group them.

Your goal is to do as few drawImage calls as possible as this is fairly expensive.

Also, talking broadly, it's a good idea to leave the micro optimisations till the end.

answered May 20, 2013 at 3:47

Jarrod

9,4855 gold badges60 silver badges73 bronze badges

Collectives™ on Stack Overflow

HTML5 canvas performance enhancements

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related