Is there a way to draw an HTML5 canvas on another canvas faster than toDataUrl? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

Is there a way to draw an HTML5 canvas on another canvas faster than toDataUrl?

I have a few pages that break up the drawing of a high quality image into many small sections so the browser doesn't lock up or cause problem for taking too long. One example is the download feature on this: https://code.sololearn.com/W6e6xWN0T7Jv/#html toDataUrl works but it seems to take a while. I want to draw the data with no error and converting to and from PNG or JPG seems like a waste of time if my goal is just to copy all pixels. Is there a faster way to copy the contents of 1 canvas to another without toDataUrl?

17th Nov 2020, 6:27 AM
Josh Greig
Josh Greig - avatar
2 Answers
+ 2
I'm not sure if this would perform better but if I remember well you should be able to use the canvas itself as source: ctx2d.drawImage(webglCanvas,0,0)
17th Nov 2020, 8:41 AM
Kevin ★
+ 1
Thanks, Kevin. When the other drawing work is much faster, switching from toDataUrl to just using the canvas directly makes the process multiples faster.
17th Nov 2020, 8:32 PM
Josh Greig
Josh Greig - avatar