Rect vs fillRect (v5)

Revision 5 of this benchmark created on

Preparation HTML

<canvas id="canvas" width="10000" height="10"></canvas>
<script>
 var context = document.getElementById("canvas").getContext("2d");
 context.fillStyle = "#000000";
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
fillRect()
context.clearRect(0,0,1000,100);
context.beginPath();
for(var i=0;i<300;i++) {
 context.fillRect(i * 3, 0, 5, 50);
}
ready
rect() with fill()
context.strokeStyle = "black";
context.fillStyle = "red";
context.clearRect(0,0,1000,100);
context.beginPath();
for(var i=0;i<300;i++) {
 context.rect(i * 3, 0, 5, 50);
}
context.stroke();
context.fill();
ready
fillRect() without beginPath()
context.clearRect(0,0,1000,100);
for(var i=0;i<300;i++) {
 context.fillRect(i * 3, 0, 5, 50);
}
ready

Revisions

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