Canvas fillStyle - cached or not? (v3)

Revision 3 of this benchmark created 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
global
ctx.fillStyle = "red";

var i = 0;

while (i < 250) {
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
}
ready
every 4
var i = 0;

while (i < 250) {
  ctx.fillStyle = "rgb(" + i + "," + i + "," + i + ")";
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
}
ready
every 2
var i = 0;

while (i < 250) {
  ctx.fillStyle = "rgb(" + i + "," + i + "," + i + ")";
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillStyle = "rgb(" + i + "," + i + "," + i + ")";
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
}
ready
every 1
var i = 0;

while (i < 250) {
  ctx.fillStyle = "rgb(" + i + "," + i + "," + i + ")";
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillStyle = "rgb(" + i + "," + i + "," + i + ")";
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillStyle = "rgb(" + i + "," + i + "," + i + ")";
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillStyle = "rgb(" + i + "," + i + "," + i + ")";
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
}
ready
every 1 lookup
var i = 0;
var shades = ["rgb(255,0,0)", "rgb(0,255,0)", "rgb(0,0,255)", "rgb(255,255,0)"];

while (i < 250) {
  ctx.fillStyle = shades[i & 3];
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillStyle = shades[i & 3];
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillStyle = shades[i & 3];
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
  ctx.fillStyle = shades[i & 3];
  ctx.fillRect((i * 8) % 100 + 0.5, ((i / 25) | 0) * 8 + 0.5, 2, 2);
  i++;
}
ready

Revisions

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