Path rect vs fillrect (v7)

Revision 7 of this benchmark created on

Preparation HTML

<canvas id="canvas" width="300" height="300"></canvas>
<script>
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext('2d');
  
  rectArea = {
   x: 30,
   y: 30,
   w: canvas.width / 2 - 30 / 2,
   h: canvas.height / 2 - 30 / 2
  }

  ctx.fillStyle = 'rgb(255, 0, 0)';
  ctx.strokeStyle = 'black';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
rect + fill
ctx.clearRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ctx.beginPath();
ctx.moveTo(rectArea.x, rectArea.y);
ctx.lineTo(rectArea.x, rectArea.h);
ctx.lineTo(rectArea.w, rectArea.h);
ctx.lineTo(rectArea.w, rectArea.y);
ctx.lineTo(rectArea.x, rectArea.y);
ctx.fill();
ready
fillRect
ctx.clearRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ctx.fillRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ready
fill existing rect
ctx.clearRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ctx.strokeRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ready
fillRect with beginPath
ctx.clearRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ctx.beginPath();
ctx.fillRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ready

Revisions

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