Run results for: Canvas Rect Performance

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Browser: Chrome 132

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

rect

5K/s

fillRect

1K/s

View exact numbers

Test name	Executions per second
✓ rect	4,955 Ops/sec
fillRect	1,309 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