Run results for: Path2d vs drawImage(svg) v2

Run details:

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

Browser: Chrome 103

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Stroke Path2d();	40827.6 Ops/sec
drawImage(svg);	3158.6 Ops/sec
drawImage(svg); with all parameters	3284.8 Ops/sec
drawImage(svg); with some parameters	3285.8 Ops/sec
Multi stroke Path2d();	31678.4 Ops/sec

HTML Preparation code:

<image id="svg1"
src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMjE2IiBoZWlnaHQ9Ijc2OSIgdmlld0JveD0iMCwwLDEyMTYsNzY5Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48dGV4dCB4PSIyMCIgeT0iMzAiIGZpbGw9IiMwMDAwMDAiIHN0cm9rZT0ibm9uZSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJub3JtYWwiIGZvbnQtc2l6ZT0iMTIiIHRleHQtYW5jaG9yPSJzdGFydCI+U2VnbWVudCBjb3VudDogODg8L3RleHQ+PHBhdGggZD0iTTQ1OCwyNjRjLTEuNTA5MjMsMS41MDkyMyAtMy42MzM2MSwtMi4zNjAzMyAtNSwtNGMtNS4zMDA2MiwtNi4zNjA3NCAtOS41OTc0OCwtMTMuNzQ5OTMgLTE2LC0xOWMtMTAuNDM4MzIsLTguNTU5NDIgLTIxLjM2NjExLC0xNy4yNDUzMSAtMzQsLTIyYy0zNy45NzM0LC0xNC4yOTEwNyAtNDYuODcxOTcsLTEzIC03NywtMTNjLTMwLjMxODM1LDAgLTEwOS4zMjA1MSwxNC45Nzc3NyAtMTIwLDUyYy0yLjg4Njg1LDEwLjAwNzc2IC0yMC4yMTA5Nyw1Ny4zNTMyMiA0LDY2YzE5LjE0MjY4LDYuODM2NjcgMzUuNzg0NzYsLTExLjIxMDk0IDQ5LC0yMWMxNC43MjQ4NywtMTAuOTA3MzEgMzAuMzg0NDEsLTIxLjQ4MDUxIDQyLC0zNmMzMi4wNDQ0MSwtNDAuMDU1NTEgMjYuODM1OCwtNTguODE2OTYgODAsLTg0YzMyLjc4NTMxLC0xNS41Mjk4OSA4My4yNDg3MywtMzEuMjUzODEgOTksMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Ik02MDEsMjg0Yy0xMy40NzIwNywxMy40NzIwNyAtNzMuNzEwNTgsLTIuNDk5NjcgLTc5LDMxYy0yLjQ4ODIsMTUuNzU4NjEgLTIuNDkzMjUsNDAuODg2MzQgMiw1NmM1LjgyMjUyLDE5LjU4NDg0IDEwLjk2NTc2LDIzLjgwMDA2IDIzLDQwYzExLjQzNjI2LDE1LjM5NDk3IDMzLjkwMTQ0LDI4LjcwNDMyIDQwLDQ3YzExLjQ0MzIsMzQuMzI5NiAtMTguMDk0MjYsNjAuMTY5ODMgLTUxLDU0Yy0zMy41Njk5MywtNi4yOTQzNiAtODEsLTMyLjQxODQ0IC04MSwtNzBjMCwtNS42NjY2NyAtMi40MTI4NSwtMTEuODcyNjkgMCwtMTdjMTYuMjg1NjIsLTM0LjYwNjk0IDY4LjQyMDc2LC0yNi4xNTE3OSA5MywtNDhjOC4yMjQxMywtNy4zMTAzMyA3LjcyOTc4LC0xNy41NDQ1IDEyLC0yN2M3LjM5NTc3LC0xNi4zNzYzNSAxNS4yMzM2MywtMzcuMzk0MSAxLC01NGMtOC4wNTE5MywtOS4zOTM5MiAtMTcuMjI4NDYsLTE4LjIyODQ2IC0yNiwtMjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Ik0zNjYsMzgyYzAsLTE0LjI3OTYxIC0yOS4yMDE5LC0xMyAtMzgsLTEzYy0zNC4xNDM1NCwwIC0xMTIsLTguMzE3NjkgLTExMiw0MmMwLDcuODYwNjEgLTAuNzk5MTksMTEuMDY3ODQgNCwxOGMxMS4wNzk0NCwxNi4wMDM2NCAyOS44NzA3NCwxNy45ODY1NiA0NywyM2M3LjQ4ODk2LDIuMTkxODkgMTQuNDI5ODUsNi4xMDc0NiAyMiw4YzYuMjkxMiwxLjU3MjggMjIuNzQyOTMsMy42OTI4IDI5LC0xYzUuNzg5NTksLTQuMzQyMTkgMi4yMDU3NSwtMTQuMjA5ODUgNSwtMTljMi43ODAxOCwtNC43NjYwMyA3LjgzOSwtOS41NDY1MSA3LC0xNWMtNC4zNzEzMywtMjguNDEzNjYgLTI1LjAzNzQ3LC00OS42MjUzNSAtMjIsLTgwYzEuOTQxNiwtMTkuNDE1OTYgMjguMDExODgsLTM5LjQ2MjEgNDMsLTQ5YzcuMjc5NjgsLTQuNjMyNTIgMTkuNjk4NDgsLTcgMjgsLTdjMTguMDI1ODMsMCAzNS42NzU2OCwxMS44MTA5NSAzNywzM2MwLjE3NzY1LDIuODQyNDUgLTMuNDk0OTQsNS4xOTUzNCAtMyw4YzMuODA3OTgsMjEuNTc4NTQgMzAuMDY5MDIsNS45MzA5OCAzOCwtMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIj48L3BhdGg+PC9nPjwvc3ZnPg"
></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 svgPath = new Path2D('M366 382c0 -14.27961 -29.2019 -13 -38 -13c-34.14354 0 -112 -8.31769 -112 42c0 7.86061 -0.79919 11.06784 4 18c11.07944 16.00364 29.87074 17.98656 47 23c7.48896 2.19189 14.42985 6.10746 22 8c6.2912 1.5728 22.74293 3.6928 29 -1c5.78959 -4.34219 2.20575 -14.20985 5 -19c2.78018 -4.76603 7.839 -9.54651 7 -15c-4.37133 -28.41366 -25.03747 -49.62535 -22 -80c1.9416 -19.41596 28.01188 -39.4621 43 -49c7.27968 -4.63252 19.69848 -7 28 -7c18.02583 0 35.67568 11.81095 37 33c0.17765 2.84245 -3.49494 5.19534 -3 8c3.80798 21.57854 30.06902 5.93098 38 -2 M601 284c-13.47207 13.47207 -73.71058 -2.49967 -79 31c-2.4882 15.75861 -2.49325 40.88634 2 56c5.82252 19.58484 10.96576 23.80006 23 40c11.43626 15.39497 33.90144 28.70432 40 47c11.4432 34.3296 -18.09426 60.16983 -51 54c-33.56993 -6.29436 -81 -32.41844 -81 -70c0 -5.66667 -2.41285 -11.87269 0 -17c16.28562 -34.60694 68.42076 -26.15179 93 -48c8.22413 -7.31033 7.72978 -17.5445 12 -27c7.39577 -16.37635 15.23363 -37.3941 1 -54c-8.05193 -9.39392 -17.22846 -18.22846 -26 -27 M458 264c-1.50923 1.50923 -3.63361 -2.36033 -5 -4c-5.30062 -6.36074 -9.59748 -13.74993 -16 -19c-10.43832 -8.55942 -21.36611 -17.24531 -34 -22c-37.9734 -14.29107 -46.87197 -13 -77 -13c-30.31835 0 -109.32051 14.97777 -120 52c-2.88685 10.00776 -20.21097 57.35322 4 66c19.14268 6.83667 35.78476 -11.21094 49 -21c14.72487 -10.90731 30.38441 -21.48051 42 -36c32.04441 -40.05551 26.8358 -58.81696 80 -84c32.78531 -15.52989 83.24873 -31.25381 99 16');
var svgPaths = [new Path2D("M366 382c0 -14.27961 -29.2019 -13 -38 -13c-34.14354 0 -112 -8.31769 -112 42c0 7.86061 -0.79919 11.06784 4 18c11.07944 16.00364 29.87074 17.98656 47 23c7.48896 2.19189 14.42985 6.10746 22 8c6.2912 1.5728 22.74293 3.6928 29 -1c5.78959 -4.34219 2.20575 -14.20985 5 -19c2.78018 -4.76603 7.839 -9.54651 7 -15c-4.37133 -28.41366 -25.03747 -49.62535 -22 -80c1.9416 -19.41596 28.01188 -39.4621 43 -49c7.27968 -4.63252 19.69848 -7 28 -7c18.02583 0 35.67568 11.81095 37 33c0.17765 2.84245 -3.49494 5.19534 -3 8c3.80798 21.57854 30.06902 5.93098 38 -2")
,new Path2D("M601 284c-13.47207 13.47207 -73.71058 -2.49967 -79 31c-2.4882 15.75861 -2.49325 40.88634 2 56c5.82252 19.58484 10.96576 23.80006 23 40c11.43626 15.39497 33.90144 28.70432 40 47c11.4432 34.3296 -18.09426 60.16983 -51 54c-33.56993 -6.29436 -81 -32.41844 -81 -70c0 -5.66667 -2.41285 -11.87269 0 -17c16.28562 -34.60694 68.42076 -26.15179 93 -48c8.22413 -7.31033 7.72978 -17.5445 12 -27c7.39577 -16.37635 15.23363 -37.3941 1 -54c-8.05193 -9.39392 -17.22846 -18.22846 -26 -27")
,new Path2D("M458 264c-1.50923 1.50923 -3.63361 -2.36033 -5 -4c-5.30062 -6.36074 -9.59748 -13.74993 -16 -19c-10.43832 -8.55942 -21.36611 -17.24531 -34 -22c-37.9734 -14.29107 -46.87197 -13 -77 -13c-30.31835 0 -109.32051 14.97777 -120 52c-2.88685 10.00776 -20.21097 57.35322 4 66c19.14268 6.83667 35.78476 -11.21094 49 -21c14.72487 -10.90731 30.38441 -21.48051 42 -36c32.04441 -40.05551 26.8358 -58.81696 80 -84c32.78531 -15.52989 83.24873 -31.25381 99 16")];

Tests:

Stroke Path2d();
ctx.stroke(svgPath);
drawImage(svg);
ctx.drawImage(svgImg,0,0);
drawImage(svg); with all parameters
ctx.drawImage(svgImg,0,0,1216,769,0,0,1216,769);
drawImage(svg); with some parameters
ctx.drawImage(svgImg,0,0,1216,769);
Multi stroke Path2d();
ctx.stroke(svgPaths[0]); ctx.stroke(svgPaths[1]); ctx.stroke(svgPaths[2]);

Run results for: Path2d vs drawImage(svg) v2

Comparison of drawing a path2d object vs using drawImage with an svg

Stroke Path2d();

drawImage(svg);

drawImage(svg); with all parameters

drawImage(svg); with some parameters

Multi stroke Path2d();