【Javascript】ボタンを押すとcanvasを画像としてダウンロード

概要

この記事では、HTMLのボタンを押すと、canvasを画像としてダウンロードできるようになるソースを紹介しています。

ソース

<canvas id="canvas"><canvas>
<button id="download">download</button>

document.getElementById("download").onclick = (event) => {
    let canvas = document.getElementById("canvas");

    let link = document.createElement("a");
    link.href = canvas.toDataURL("image/png");
    link.download = "test.png";
    link.click();
}