Benchmark: Path2d vs drawImage(svg) v2

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]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Stroke Path2d();
drawImage(svg);
drawImage(svg); with all parameters
drawImage(svg); with some parameters
Multi stroke Path2d();

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Stroke Path2d();	203897.7 Ops/sec
drawImage(svg);	75052.1 Ops/sec
drawImage(svg); with all parameters	125209.9 Ops/sec
drawImage(svg); with some parameters	95568.6 Ops/sec
Multi stroke Path2d();	425923.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

It seems like we have some benchmark results and test cases here!

To extract the relevant information, I'll focus on the test cases and their corresponding execution rates.

**Benchmark Test Cases**

The provided test cases are related to rendering SVG images using HTML5 canvas. The test cases cover different scenarios:

1. `Stroke Path2d();`
2. `drawImage(svg);` with all parameters
3. `drawImage(svg);` with some parameters
4. `Multi stroke Path2d();`

**Execution Rates**

The latest benchmark result provides execution rates for each test case, measured in executions per second (ExecutionsPerSecond). The results are:

1. `Stroke Path2d();` - 74846.625 ExecutionsPerSecond
2. `Multi stroke Path2d();` - 64230.41015625 ExecutionsPerSecond
3. `drawImage(svg); with all parameters` - 16269.830078125 ExecutionsPerSecond
4. `drawImage(svg); with some parameters` - 13614.2734375 ExecutionsPerSecond

These execution rates indicate that the browser is able to render SVG images using HTML5 canvas with varying levels of complexity and optimization.

To answer your question, I'd like to know what specific aspect of these benchmark results you're interested in (e.g., average execution rate, fastest test case, etc.)?

Related benchmarks:

Path2d vs drawImage(svg) v2 (version: 1)

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

Comparing performance of: Stroke Path2d(); vs drawImage(svg); vs drawImage(svg); with all parameters vs drawImage(svg); with some parameters vs Multi stroke Path2d();

Created: 4 years ago by: Registered User

Jump to the latest result

Stroke Path2d();

drawImage(svg);

drawImage(svg); with all parameters

drawImage(svg); with some parameters

Multi stroke Path2d();

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):