Benchmark: Path2d vs CanvasPatchCommands

HTML Preparation code:

<canvas id="cnv1" width=1216 height=769></canvas>

Script Preparation code:

var ctx = document.getElementById("cnv1").getContext("2d");
var svgImg = document.getElementById("svg1");
var z = new Path2D("M143.62 103.75c.12-.28.4-.22.54-.45.13-.2.17-.49.37-.64.26-.2.3-.92.42-1.2.6-1.57 1.92-3 3-4.25.96-1.15 2.07-2.12 2.14-3.67.1-1.95.13-3.9.27-5.85.1-1.5.03-3.48.77-4.8.43-.78.15-1.13-.37-1.73-.15-.17-.33-.3-.48-.47-.26-.3.08-.56-.04-.86-.27-.69-.83-1.23-1.16-1.89-.27-.55-.1-1.23-.15-1.83-.1-1-.4-1.95-.55-2.93-.02-.1-.2-.52-.05-.6l3.47-1.64 25.13 14.22.26 13.92c-.84-.26-.9-.16-1.78-.02-.58.1-1.32 0-1.5.54-.14.4.24 1.14-.05 1.52-.27.36-.68 1.58-1.25 1.78-.65.23-.38 1.35.08 1.8-1.05.84-1.74 1.37-.92 2.54.55.8-.74 1.13-1.09 1.8-.24.46-.34.61.03.98.32.32.86-.02 1.2-.02.42 0 .77.2.5.54-.4.48.41 1.05.1 1.9l.33-.15c.25.4-.03.84-.03 1.25 0 .46.06.47.36.8.27.3.91.13.95.93.02.36-.32 1-.22 1.41-.18-.3-1.06-.6-1.44-.4-.23.12-.55.22-.7.44-.18.28-.22.1-.43.33-.33.37-1.14.28-1.25.86-.05.24.14.44.06.7-.25.81-1 1.15-1.6 1.7-.47.43-.7 1.04-1.14 1.51-.76.84-1.28 1.03-2.35 1.43a8.9 8.9 0 0 1-2.77.26c-.22-.02-1.56.3-1.08.66.2.16.76.26.63.64a4.13 4.13 0 0 1-.97 1.34c-.26.24-.5.84-.82.92-.63.16-1.38.04-2.03.1-.85.07-1.48.28-2.2.73-.4.25-1.16.46-1.34.94-.3-.4-.7-.7-.82-1.2-.27.1-.4.43-.52.66-.1.15-.6.2-.79.27-.87.4-1.17.32-2.1.33.5-.6-.06-.84-.23-1.4-.24-.79-.45-1.67-.96-2.33-.44-.56-1.05-.95-1.6-1.39-.54-.44-.84-.98-1.28-1.5-.3-.35-1.05-1.03-.7-1.55.37-.52.54-.9 1.23-.86.76.04 1.5.34 2.25.1.34-.12.63.04.93.16.27.11.66-.14.91-.22-1.5-.84-2.2-2.86-2.13-4.5.02-.38.2-.69.25-1.04.03-.38-.06-.75-.07-1.12 0-.28.05-.74-.1-1-.14-.19-.5-.04-.48-.37.03-.43-.14-1.02-.23-1.44-.07-.3-.5-.36-.72-.5-.7-.43.2-1.08-1.2-1.3-.33-.04-.23.22-.59-.05a15.6 15.6 0 0 1-1.32-2.04c-.46-.84-.4-1.88-.58-2.8");
var z2 = new Path2D("M539.01268 400c6.65049 0 11.81248 7.97321 19 9c29.83558 4.26223 69 -3.45722 69 -38 M536.01268 333c0 -31.29974 -70.64882 -5.39684 -57 31c22.54786 60.12763 80.70984 -0.29016 60 -21 M584.01268 318c0 -26.33841 88.76022 -84.59663 93 -21c2.90208 43.53122 -84 66.60075 -84 30");

Tests:

Path2D
ctx.fillStyle="red"; ctx.fill(z); ctx.strokeStyle="black"; ctx.stroke(z);
Path commands
ctx.beginPath(); ctx.moveTo(143.62, 103.75); ctx.bezierCurveTo(143.74, 103.47, 144.02, 103.53, 144.16, 103.3); ctx.bezierCurveTo(144.29, 103.1, 144.32999999999998, 102.81, 144.53, 102.66); ctx.bezierCurveTo(144.79, 102.46, 144.83, 101.74, 144.95, 101.46); ctx.bezierCurveTo(145.54999999999998, 99.89, 146.86999999999998, 98.46, 147.95, 97.21); ctx.bezierCurveTo(148.91, 96.05999999999999, 150.01999999999998, 95.08999999999999, 150.08999999999997, 93.53999999999999); ctx.bezierCurveTo(150.18999999999997, 91.58999999999999, 150.21999999999997, 89.63999999999999, 150.35999999999999, 87.69); ctx.bezierCurveTo(150.45999999999998, 86.19, 150.39, 84.21, 151.13, 82.89); ctx.bezierCurveTo(151.56, 82.11, 151.28, 81.76, 150.76, 81.16); ctx.bezierCurveTo(150.60999999999999, 80.99, 150.42999999999998, 80.86, 150.28, 80.69); ctx.bezierCurveTo(150.02, 80.39, 150.36, 80.13, 150.24, 79.83); ctx.bezierCurveTo(149.97, 79.14, 149.41, 78.6, 149.08, 77.94); ctx.bezierCurveTo(148.81, 77.39, 148.98000000000002, 76.71, 148.93, 76.11); ctx.bezierCurveTo(148.83, 75.11, 148.53, 74.16, 148.38, 73.17999999999999); ctx.bezierCurveTo(148.35999999999999, 73.08, 148.18, 72.66, 148.32999999999998, 72.58); ctx.lineTo(151.79999999999998, 70.94); ctx.lineTo(176.92999999999998, 85.16); ctx.lineTo(177.18999999999997, 99.08); ctx.bezierCurveTo(176.34999999999997, 98.82, 176.28999999999996, 98.92, 175.40999999999997, 99.06); ctx.bezierCurveTo(174.82999999999996, 99.16, 174.08999999999997, 99.06, 173.90999999999997, 99.60000000000001); ctx.bezierCurveTo(173.76999999999998, 100.00000000000001, 174.14999999999998, 100.74000000000001, 173.85999999999996, 101.12); ctx.bezierCurveTo(173.58999999999995, 101.48, 173.17999999999995, 102.7, 172.60999999999996, 102.9); ctx.bezierCurveTo(171.95999999999995, 103.13000000000001, 172.22999999999996, 104.25, 172.68999999999997, 104.7); ctx.bezierCurveTo(171.63999999999996, 105.54, 170.94999999999996, 106.07000000000001, 171.76999999999998, 107.24000000000001); ctx.bezierCurveTo(172.32, 108.04, 171.02999999999997, 108.37, 170.67999999999998, 109.04); ctx.bezierCurveTo(170.43999999999997, 109.5, 170.33999999999997, 109.65, 170.70999999999998, 110.02000000000001); ctx.bezierCurveTo(171.02999999999997, 110.34, 171.57, 110.00000000000001, 171.90999999999997, 110.00000000000001); ctx.bezierCurveTo(172.32999999999996, 110.00000000000001, 172.67999999999998, 110.20000000000002, 172.40999999999997, 110.54000000000002); ctx.bezierCurveTo(172.00999999999996, 111.02000000000002, 172.81999999999996, 111.59000000000002, 172.50999999999996, 112.44000000000003); ctx.lineTo(172.83999999999997, 112.29000000000002); ctx.bezierCurveTo(173.08999999999997, 112.69000000000003, 172.80999999999997, 113.13000000000002, 172.80999999999997, 113.54000000000002); ctx.bezierCurveTo(172.80999999999997, 114.00000000000001, 172.86999999999998, 114.01000000000002, 173.17, 114.34000000000002); ctx.bezierCurveTo(173.44, 114.64000000000001, 174.07999999999998, 114.47000000000001, 174.11999999999998, 115.27000000000002); ctx.bezierCurveTo(174.14, 115.63000000000002, 173.79999999999998, 116.27000000000002, 173.89999999999998, 116.68000000000002); ctx.bezierCurveTo(173.71999999999997, 116.38000000000002, 172.83999999999997, 116.08000000000003, 172.45999999999998, 116.28000000000002); ctx.bezierCurveTo(172.23, 116.40000000000002, 171.90999999999997, 116.50000000000001, 171.76, 116.72000000000001); ctx.bezierCurveTo(171.57999999999998, 117.00000000000001, 171.54, 116.82000000000001, 171.32999999999998, 117.05000000000001); ctx.bezierCurveTo(170.99999999999997, 117.42000000000002, 170.19, 117.33000000000001, 170.07999999999998, 117.91000000000001); ctx.bezierCurveTo(170.02999999999997, 118.15, 170.21999999999997, 118.35000000000001, 170.14, 118.61000000000001); ctx.bezierCurveTo(169.89, 119.42000000000002, 169.14, 119.76000000000002, 168.54, 120.31000000000002); ctx.bezierCurveTo(168.07, 120.74000000000002, 167.84, 121.35000000000002, 167.4, 121.82000000000002); ctx.bezierCurveTo(166.64000000000001, 122.66000000000003, 166.12, 122.85000000000002, 165.05, 123.25000000000003); ctx.bezierCurveTo(164.14600587138946, 123.48134199054587, 163.2112539949289, 123.56908043738028, 162.28, 123.51000000000003); ctx.bezierCurveTo(162.06, 123.49000000000004, 160.72, 123.81000000000003, 161.2, 124.17000000000003); ctx.bezierCurveTo(161.39999999999998, 124.33000000000003, 161.95999999999998, 124.43000000000004, 161.82999999999998, 124.81000000000003); ctx.bezierCurveTo(161.60034517620645, 125.31751264704667, 161.2703942628317, 125.77332112610513, 160.85999999999999, 126.15000000000003); ctx.bezierCurveTo(160.6, 126.39000000000003, 160.35999999999999, 126.99000000000004, 160.04, 127.07000000000004); ctx.bezierCurveTo(159.41, 127.23000000000003, 158.66, 127.11000000000004, 158.01, 127.17000000000003); ctx.bezierCurveTo(157.16, 127.24000000000002, 156.53, 127.45000000000003, 155.81, 127.90000000000003); ctx.bezierCurveTo(155.41, 128.15000000000003, 154.65, 128.36000000000004, 154.47, 128.84000000000003); ctx.bezierCurveTo(154.17, 128.44000000000003, 153.77, 128.14000000000004, 153.65, 127.64000000000003); ctx.bezierCurveTo(153.38, 127.74000000000002, 153.25, 128.07000000000002, 153.13, 128.30000000000004); ctx.bezierCurveTo(153.03, 128.45000000000005, 152.53, 128.50000000000003, 152.34, 128.57000000000005); ctx.bezierCurveTo(151.47, 128.97000000000006, 151.17000000000002, 128.89000000000004, 150.24, 128.90000000000006); ctx.bezierCurveTo(150.74, 128.30000000000007, 150.18, 128.06000000000006, 150.01000000000002, 127.50000000000006); ctx.bezierCurveTo(149.77, 126.71000000000005, 149.56000000000003, 125.83000000000006, 149.05, 125.17000000000006); ctx.bezierCurveTo(148.61, 124.61000000000006, 148, 124.22000000000006, 147.45000000000002, 123.78000000000006); ctx.bezierCurveTo(146.91000000000003, 123.34000000000006, 146.61, 122.80000000000005, 146.17000000000002, 122.28000000000006); ctx.bezierCurveTo(145.87, 121.93000000000006, 145.12, 121.25000000000006, 145.47000000000003, 120.73000000000006); ctx.bezierCurveTo(145.84000000000003, 120.21000000000006, 146.01000000000002, 119.83000000000006, 146.70000000000002, 119.87000000000006); ctx.bezierCurveTo(147.46, 119.91000000000007, 148.20000000000002, 120.21000000000006, 148.95000000000002, 119.97000000000006); ctx.bezierCurveTo(149.29000000000002, 119.85000000000005, 149.58, 120.01000000000006, 149.88000000000002, 120.13000000000005); ctx.bezierCurveTo(150.15000000000003, 120.24000000000005, 150.54000000000002, 119.99000000000005, 150.79000000000002, 119.91000000000005); ctx.bezierCurveTo(149.29000000000002, 119.07000000000005, 148.59000000000003, 117.05000000000005, 148.66000000000003, 115.41000000000005); ctx.bezierCurveTo(148.68000000000004, 115.03000000000006, 148.86, 114.72000000000006, 148.91000000000003, 114.37000000000005); ctx.bezierCurveTo(148.94000000000003, 113.99000000000005, 148.85000000000002, 113.62000000000005, 148.84000000000003, 113.25000000000004); ctx.bezierCurveTo(148.84000000000003, 112.97000000000004, 148.89000000000004, 112.51000000000005, 148.74000000000004, 112.25000000000004); ctx.bezierCurveTo(148.60000000000005, 112.06000000000004, 148.24000000000004, 112.21000000000004, 148.26000000000005, 111.88000000000004); ctx.bezierCurveTo(148.29000000000005, 111.45000000000003, 148.12000000000006, 110.86000000000004, 148.03000000000006, 110.44000000000004); ctx.bezierCurveTo(147.96000000000006, 110.14000000000004, 147.53000000000006, 110.08000000000004, 147.31000000000006, 109.94000000000004); ctx.bezierCurveTo(146.61000000000007, 109.51000000000003, 147.51000000000005, 108.86000000000004, 146.11000000000007, 108.64000000000004); ctx.bezierCurveTo(145.78000000000006, 108.60000000000004, 145.88000000000008, 108.86000000000004, 145.52000000000007, 108.59000000000005); ctx.bezierCurveTo(145.02763114922203, 107.94535294208787, 144.5862927627436, 107.26328452663952, 144.20000000000007, 106.55000000000004); ctx.bezierCurveTo(143.74000000000007, 105.71000000000004, 143.80000000000007, 104.67000000000004, 143.62000000000006, 103.75000000000004); ctx.fillStyle="red"; ctx.fill(); ctx.strokeStyle="black"; ctx.stroke();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Path2D
Path commands

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Path2D	242191.6 Ops/sec
Path commands	61680.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark results!

It looks like we have two sets of results:

**RawUAString**: The raw user agent string from each device, which includes information about the browser, device platform, operating system, and version.

**Browser**: The specific browser version running on each device.

**DevicePlatform**: The type of device (e.g., Desktop, Laptop) being used to run the benchmark.

**OperatingSystem**: The operating system running on each device.

**ExecutionsPerSecond**: A measure of how many times a specific command or code snippet is executed per second.

**TestName**: The name of the test being performed, which in this case appears to be related to path commands.

From the results, we can see that:

* Chrome 128 (on Mac OS X 10.15.7) achieves the highest execution rate for "Path commands" with **96720.71875** executions per second.
* The same browser and operating system combination is used for the "Path2D" test, which achieves a slightly lower execution rate of **84899.09375** executions per second.

However, without more context or information about what specific path command or code snippet is being measured, it's difficult to draw conclusions about the performance differences between these two tests.

If you'd like to share more details about the specific use case or requirements for this benchmark, I'd be happy to try and provide more insights!

Related benchmarks:

Path2d vs CanvasPatchCommands (version: 0)

Comparing performance of: Path2D vs Path commands

Created: 2 years ago by: Guest

Jump to the latest result

Path2D

Path commands

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):