Hi,
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
