Path rect vs fillrect

Benchmark created by Vitali 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
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
path rect
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.beginPath();
ctx.rect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ctx.fill();
ctx.closePath();
ready
fillRect
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ready
path rect no path
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.rect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ctx.fill();
ready
fillRect with path
ctx.beginPath();
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(rectArea.x, rectArea.y, rectArea.w, rectArea.h);
ctx.closePath();
ready

Revisions

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