Well let's see, you have your canvas 👩🎨, you have encoded the output to base64 jpeg... Stop! Before you make a huge massive string which actually adds more weight as base64 maybe think about formats for a moment. .webp is Google's darling image format which promises to see large reductions to overall size with lossless quality, in practical terms it might make the image a tiny bit more blury but honestly I can't tell, even with my glasses on 👓.
So because I googled it I know and so will you, you can set a canvases dataURI format to webp, effectively counteracting the bloat in theory. But by how much I'm not certain 👨🔬 having niether the will to do so. This is a theoretical post because I'm lazy today.
Okay you have a lovely big optimized string, what if you could stage it in such a way that this base64 image didn't appear in the Dom? What if it looked more like a URL?
Boom, this works.
Okay but what if my browser doesn't support webp?
David Walsh to the rescue!
So that's cool isn't it, I had less time to explain all this, this time was a fast train.