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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15

Browser: Safari 14

Operating system: Mac OS X 10.15.6

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Fill Color Read	9186790.0 Ops/sec
Fill Color Write	14491900.0 Ops/sec
Line width read	16709240.0 Ops/sec
Line width write	16533010.0 Ops/sec
Custom Property Read	18163320.0 Ops/sec
Custom Property Write	18048910.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;