Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Path2d vs drawImage(svg)
(version: 0)
Comparing performance of:
drawImage() vs Path2D
Created:
5 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
drawImage()
Path2D
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
Browser/OS:
Chrome 143 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=622793" width="100%" height="500px"></iframe>
Test name
Executions per second
drawImage()
152678.1 Ops/sec
Path2D
59482.2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
To help you with your question, I'll need to clarify that there are no questions asked in the provided text. However, based on the content: 1. It appears that you have a benchmark result for two test cases: `drawImage()` and `Path2D`. 2. The first row shows a Firefox Mobile 131 browser with high executions per second (68948.1953125) for the `Path2D` test case. 3. The second row shows a similar Firefox Mobile 131 browser but lower executions per second (40888.3671875) for the `drawImage()` test case. If you'd like to ask a specific question about these benchmark results or would like me to help with something else, please feel free to do so!
Related benchmarks:
Path2d vs drawImage(svg) v2
compare drawing lots of sprites (filled circles and squares) using various canvas methods II
compare drawing lots of sprites (filled circles and squares) using various canvas methods II WITH ROUNDED PIXELS
Path2d vs CanvasPatchCommands
Comments
Confirm delete:
Do you really want to delete benchmark?