Run results for: DrawStroke bench

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Browser: Chrome 103

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Cached	559796.1 Ops/sec
draw rect rounded	1845354.4 Ops/sec
draw rect not rounded	1778534.2 Ops/sec
rect clipped	461346.9 Ops/sec

HTML Preparation code:

<canvas id='master' width='100' height='100'></canvas>
<canvas id='cached' width='100' height='100'></canvas>

Script Preparation code:

var master = document.getElementById('master');
var masterctx = master.getContext('2d');

var cached = document.getElementById('cached');
var cachedctx = master.getContext('2d');

cachedctx.strokeRect(0, 0, 100, 100)

Tests:

Cached
masterctx.drawImage(cached,0,0);
draw rect rounded
cachedctx.strokeRect(0, 0, 100, 100)
draw rect not rounded
masterctx.strokeRect(0.5,0.5, 99.5, 99.5);
rect clipped
masterctx.save(); const region = new Path2D(); region.rect(0, 0, 100, 100); masterctx.clip(region, 'evenodd'); masterctx.lineWidth = 2; masterctx.strokeRect(0, 0, 100, 100); masterctx.restore();

Run results for: DrawStroke bench

stroke with clip vs no, rounded or not, vs cached

Cached

draw rect rounded

draw rect not rounded

rect clipped