Benchmark: Path2d vs drawImage(svg)

HTML Preparation code:

<image id="svg1"
src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNjk0LjQ5NTEyIiBoZWlnaHQ9Ijk1MS43NTEwNCIgdmlld0JveD0iMCwwLDE2OTQuNDk1MTIsOTUxLjc1MTA0Ij48ZyBmaWxsLW9wYWNpdHk9IjAuMjY2NjciIGZpbGw9IiMyMjU1YmIiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik03MzEuMDEyNjgsMjU5Yy0xNi44NzIxNSwtMTYuODcyMTUgLTUzLjU5NzY0LC0xMS40OTc3MyAtNzUsLTExYy01NS4xODE2NCwxLjI4MzI5IC0yMDIuMDI3NjUsMjMuNzc2OTggLTIxMyw5NGMtMTQuMDA4OTYsODkuNjU3MzYgMTMwLjA1MDYyLDEwMC42NzA4OSAxODYsNzdjNjguNzI3OCwtMjkuMDc3MTUgNDEuMTAzNTMsLTY2LjU0NDk0IDcwLC0xMDdjOS40NjAwNSwtMTMuMjQ0MDcgMTguNDM0OTgsLTI3LjkwODMyIDMzLC0zNmM2LjI4NzUyLC0zLjQ5MzA3IDE0Ljc4NDEzLC0xLjc4NDEzIDIwLC03Ij48L3BhdGg+PHBhdGggZD0iTTU4NC4wMTI2OCwzMThjMCwtMjYuMzM4NDEgODguNzYwMjIsLTg0LjU5NjYzIDkzLC0yMWMyLjkwMjA4LDQzLjUzMTIyIC04NCw2Ni42MDA3NSAtODQsMzAiPjwvcGF0aD48cGF0aCBkPSJNNTM2LjAxMjY4LDMzM2MwLC0zMS4yOTk3NCAtNzAuNjQ4ODIsLTUuMzk2ODQgLTU3LDMxYzIyLjU0Nzg2LDYwLjEyNzYzIDgwLjcwOTg0LC0wLjI5MDE2IDYwLC0yMSI+PC9wYXRoPjxwYXRoIGQ9Ik01MzkuMDEyNjgsNDAwYzYuNjUwNDksMCAxMS44MTI0OCw3Ljk3MzIxIDE5LDljMjkuODM1NTgsNC4yNjIyMyA2OSwtMy40NTcyMiA2OSwtMzgiPjwvcGF0aD48L2c+PC9zdmc+"
></image>
<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("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 M731.01268 259c-16.87215 -16.87215 -53.59764 -11.49773 -75 -11c-55.18164 1.28329 -202.02765 23.77698 -213 94c-14.00896 89.65736 130.05062 100.67089 186 77c68.7278 -29.07715 41.10353 -66.54494 70 -107c9.46005 -13.24407 18.43498 -27.90832 33 -36c6.28752 -3.49307 14.78413 -1.78413 20 -7");
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:

drawImage()
ctx.drawImage(svgImg,0,0);
Path2D
ctx.fill(z); ctx.fill(z2); ctx.stroke(z);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
drawImage()
Path2D

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: one month ago)

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
drawImage()	3389.9 Ops/sec
Path2D	7467.9 Ops/sec

Path2d vs drawImage(svg) (version: 0)

Comparing performance of: drawImage() vs Path2D

Created: 3 years ago by: Registered User

Jump to the latest result

drawImage()

Path2D

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A