Run results for: Canvas Rect Performance

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0

Browser: Firefox 144

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 10 months ago

Benchmark engine: Benchmark.js

rect

19K/s

fillRect

993/s

View exact numbers

Test name	Executions per second
✓ rect	18,533 Ops/sec
fillRect	993 Ops/sec

Script Preparation code:


var arr = new Array(1000);
for (let i = 0; i < arr.length; ++i) {
  arr[i] = Math.random() * 10;
}
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var w = 4;
canvas.width = arr.length * w;
canvas.height = 20;

context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'red';

Tests:

fillRect
for (let i = 0; i < arr.length; ++i) { const offset = i * w; context.fillRect(offset, 0, w, arr[i]); }
rect
context.beginPath() for (let i = 0; i < arr.length; ++i) { const offset = i * w; context.rect(offset, 0, w, arr[i]); } context.fill();

Run results for: Canvas Rect Performance

fillRect() vs Path rect()

fillRect

rect