CODEWITHSUNDEEP
javascripthtmlcanvas
user1431627
user1431627

Reputation: 815

Canvas fillStyle performance

I was checking how much less my game was going to perform with a trail effect. But what I noticed was that I got more operations per second. How is this possible?

How is this...

    context.fillRect(0, 0, 500, 500); // clearing canvas without any trail effect

... slower than this?

    context.fillStyle = 'rgba(255, 255, 255, 0.1)'; // clearing canvas with trail effect
    context.fillRect(0, 0, 500, 500);

Link to test: http://jsperf.com/canvas-trailing-effect

Upvotes: 0

Views: 1860

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

I guess there is a little initialization issue here : The canvas fillstyle is not reseted between each test loop.

Setup the fillstyle before calling fillRect, and you'll see that a fillRect with black color is faster, as expected.

Also remember that clearRect will be faster to clear the canvas.

i updated your performance test :

http://jsperf.com/canvas-trailing-effect/2

Edit : i was curious to know the overhead of several calls, so i edited the performance test to see the time taken in 3 / 10 / 20 steps.

so we have, on FF (mac OS / imac) :

3 steps : 1/12000 = 83 ns = 3 * overhead + filltime 10 steps : 1/8000 = 125 ns = 10 * overhead + filltime 20 steps : 1/5000 = 200 ns = 20 * overhead + filltime

so we have an overhead near 6 ns, with a filltime near 60 ns.

So the formula is approximately time taken = number of steps * 6 + (ratio filled) * 60
which makes 90 ns for 50% fill in ten steps.

This kind of computation should be done on several browsers / devices to be more relevant.

Also this test would benefit from being done within a rAF.

Upvotes: 2

Related Questions