Benchmark: canvas setTransform: values vs DOMMAtrix vs matrix init

Script Preparation code:

var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
m = new DOMMatrix(),
a = m.a = 1,
b = m.b = 0,
c = m.c = 0,
d = m.d = 2,
e = m.e = 3,
f = m.f = 4,
s = { a: a, b: b, c: c, d: d, e: e, f: f };

Tests:

values
ctx.setTransform(a, b, c, d, e, f);
matrix
ctx.setTransform(m);
matrix spoof
ctx.setTransform(s);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
values
matrix
matrix spoof

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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Browser/OS: Chrome 95 on Windows

View result in a separate tab

Test name	Executions per second
values	672166.3 Ops/sec
matrix	138440.5 Ops/sec
matrix spoof	263182.3 Ops/sec

canvas setTransform: values vs DOMMAtrix vs matrix init (version: 0)

desc

Comparing performance of: values vs matrix vs matrix spoof

Created: 2 years ago by: Registered User

Jump to the latest result

values

matrix

matrix spoof

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A