Base64 encode

The browser has the canvas data. And now we want it back to save it somewhere else.

If what we want is just displaying the image, we don't need to neither convert to image nor save to anywhere.

We can use data URL.

It is like that:

<img alt="sample" src="data:image/png;base64,R0lGODlhVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhB0SlBCBMQiB0UjIQA7" />

And canvas provides a method to concert the current drawing to this data URL format, by using the toDataURL method.

CSS-Tricks discussed more on this data URL topic. It’s worth checking it. And here is a DataURL.net that creates a data URL from your file.

What’s next? We’re going to take a look at “List of drawings”.