Export canvas as an image
The easiest way was to fetch the
<canvas> element, convert the sketch into a data URI and redirect the page to the file.
const canvas = document.querySelector('canvas'); window.location = canvas .toDataURL('image/png') .replace('image/png', 'image/octet-stream');
This works great except for one small (read big) downside. It isn't possible to name the file. Instead I'd to create an
<a> element, set the
download attribute and then click the link programmatically. This let me name the file before saving it.
const canvas = document.querySelector('canvas'); const link = document.createElement('a'); link.download = 'sketch-092.png'; link.href = canvas .toDataURL('image/png') .replace('image/png', 'image/octet-stream'); link.click();