HTML5 canvas: Performance on context access.
davidcm
I've found some quite of strange behavior when updating the canvas
inside a loop. First canvas access after a screen update (e.g., when
the CPU gets idle) has an extremely high cost, even if just putting a
pixel onto the screen. An example that shows this behavior is below,
you can profile consumed timings with the Firebug profiler. In the
code I'm working right now, first access takes the 23% of the loop
time, and the update of about 50 images -with slicing, rotations, etc-
just take a 15%).
I don't know if this is the standard behavior, If this is the
performance supposed to be by some kind of limitation in the standard
or whatsoever, I just want to know what this happens and how to avoid
it if possible (I'm working on time-critical applications for small
devices and I need to improve performance on that).
Thank you.
-- Example start --
<html>
<body>
<canvas id="myCanvas"/>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas'), context =
canvas.getContext('2d');
function f1() {
context.fillStyle = 'red';
context.fillRect(0, 0, 1, 1);
}
function f2() {
context.fillStyle = 'blue';
for(var i = 0; i < 10; i++) context.fillRect(Math.random() * 100,
Math.random() * 100, Math.random() * 100,
Math.random() * 100);
}
setInterval(function() {
f1();
f2();
}, 100);
</script>
</body>
</html>
-- Example end --
Check the performance of this example with the firebug profiler; you
will see that f1() takes more time to run that f2()... and
Boris Zbarsky
> I've found some quite of strange behavior when updating the canvas
> inside a loop. First canvas access after a screen update (e.g., when
> the CPU gets idle) has an extremely high cost, even if just putting a
> pixel onto the screen. An example that shows this behavior is below,
> you can profile consumed timings with the Firebug profiler. In the
> code I'm working right now, first access takes the 23% of the loop
> time, and the update of about 50 images -with slicing, rotations, etc-
> just take a 15%).
I'd be interested in seeing your actual loop... As well as which OS
you're on and what Gecko version. I just tried your testcase on Mac
with a mozilla-central build, and the multiple fills take more time than
the one fill, as expected...
> Check the performance of this example with the firebug profiler; you
> will see that f1() takes more time to run that f2()... and
Note that the firebug profiler perturbs the results enough (e.g. by
disabling the jit when active) that its information may or may not match
what you're doing well.
Do timings using JS Date() show the same effect?
-Boris