右クリックして『名前を付けて画像で保存』でいいんですが。


a タグの download 属性を使うと、HTMLだけでファイルのダウンロードリンクを作れます。

href 属性にはダウンロード対象のファイルURLを、download 属性にはダウンロード時のファイル名を指定します。

これと canvastoDataURL メソッドを組み合わせると、canvas の内容を画像でダウンロードするリンクを作れます。

ダウンロードリンクを押したときに canvas の内容を toDataURL でData URIに変換して、href に設定するだけです。

以下にサンプルを置いておきます。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<meta name="robots" content="noarchive" />
	<title>Canvasダウンロード サンプル</title>
</head>
<body>
	<canvas id="src-canvas"></canvas><br />
	<a id="download-link" href="" download="">画像としてダウンロード</a>
	<script src="script.js"></script>
</body>
</html>
JavaScript
(() => {
	// Canvasの高さ・幅設定 (256px)
	const canvas = document.getElementById('src-canvas');
	canvas.width = canvas.height = 256;
	
	// Canvasを黒で塗りつぶして、白い円を描画
	const ctx = canvas.getContext('2d');
	ctx.fillStyle = 'rgba(0,0,0,1)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.strokeStyle = 'rgba(255,255,255,1)';
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.arc(128, 128, 100, 0, Math.PI * 2, false);
	ctx.stroke();
	
	// download属性付きリンククリック時
	document.getElementById('download-link').addEventListener('click', (e) => {
		// data:URLを自身のリンク先として設定すると、このあとダウンロードされる
		const a = e.target;
		a.href = canvas.toDataURL(); // Canvasからdata:URLを取得
		a.download = new Date().getTime() + '.png'; // ダウンロードファイル名はタイムスタンプに設定
	});
})();