Run results for: Canvas Rect Performance

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser: Chrome 129

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
fillRect	1067.4 Ops/sec
rect	4948.7 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