Run results for: Canvas Rect Performance

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 127

Operating system: Android

Device Platform: Mobile

Date tested: one year ago

Test name	Executions per second
fillRect	562.1 Ops/sec
rect	1336.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