Benchmark: Compare of different Canvas Context2D properties RW - MeasureThat.net

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;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Fill Color Read
Fill Color Write
Line width read
Line width write
Custom Property Read
Custom Property Write

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 years ago)

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/OS: Safari 14 on Mac OS X 10.15.6

View result in a separate tab

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