Canvas fillStyle - cached or not? (v4)

Revision 4 of this benchmark created by Andre on

Description

Check whether fillStyle is cached in Canvas implementation so that performance doesn't degrade if called with the same value repeatedly.

Preparation HTML

<canvas id="c" width="100" height="100" />
<script>
  var canvas = document.getElementById('c'),
      ctx = canvas.getContext('2d');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
fillStyle once
ctx.fillStyle = 'red';
for (var i = 0; i < 10000; i++) {
 ctx.fillRect(0, 0, 100, 100);
}
ready
fillStyle many times
for (var i = 0; i < 10000; i++) {
 ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 100, 100);
}
ready
fillStyle once with save/restore
ctx.fillStyle = 'red';
for (var i = 0; i < 10000; i++) {
 ctx.save();
 ctx.fillRect(0, 0, 100, 100);
 ctx.restore();
}
ready
fillStyle many times with save/restore
for (var i = 0; i < 10000; i++) {
 ctx.save();
 ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 100, 100);
 ctx.restore();
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.