Run results for: Compare of different Canvas Context2D properties RW - MeasureThat.net

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36

Browser: Chrome 89

Operating system: Mac OS X 11.1.0

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Fill Color Read	4532646.0 Ops/sec
Fill Color Write	9210005.0 Ops/sec
Line width read	11717370.0 Ops/sec
Line width write	12024910.0 Ops/sec
Custom Property Read	13777920.0 Ops/sec
Custom Property Write	13630000.0 Ops/sec

Website performance monitoring

Script Preparation code:

window.ctx = document.createElement('canvas').getContext('2d');
ctx.customProp = 2;

Tests:

Fill Color Read
const fillColor = ctx.fillStyle
Fill Color Write
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
Line width read
const lineWidth = ctx.lineWidth;
Line width write
ctx.lineWidth = 2;
Custom Property Read
const customProp = ctx.customProp;
Custom Property Write
ctx.customProp = 2;