Canvas fillStyle - cached or not?

Benchmark created by Mourner 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 < 100; i++) {
 ctx.fillRect(0, 0, 100, 100);
}
ready
fillStyle many times
for (var i = 0; i < 100; i++) {
 ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 100, 100);
}
ready
fillStyle once with save/restore
ctx.fillStyle = 'red';
for (var i = 0; i < 100; i++) {
 ctx.save();
 ctx.fillRect(0, 0, 100, 100);
 ctx.restore();
}
ready
fillStyle many times with save/restore
for (var i = 0; i < 100; 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.