【HTML5・javascript】canvasで描画したものを画像にする方法

最低限必要なモノ

canvasで描画した図形を画像として出力するのに必要なもの

HTML

<canvas id="cv"></canvas>
<img id="img" src="">

canvasタグと出力用imgタグが必要

javascript

//　カンバス描画に必要な記述
canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
…
//　描画したcanvasをimgタグに出力する記述
var png = canvas.toDataURL();
document.getElementById("img").src = png;

toDataURL()はcanvasに描画されているデータを「データURL(data:~)」として取得するメソッドらしい
「データURL(data:~)」は「データURIスキーム」の一種みたいで、どの方法でデータにアクセスするかどうかを示すものみたい
「http:,https:」や「tel:,mailto:,ftp:」なんかがほかにある

実際出力してみると

<img id="img" src="data:image/png;base64,…（長いので省略）…">

って感じで出力される

実際に出力してみた

//【html】
<canvas id="cv"></canvas>
<img id="img" src="">

//【javascript】
<script>
window.onload = function() {
	//　canvas描画するのに必要な記述
	canvas = document.getElementById('cv');
	ctx = canvas.getContext('2d');

	// canvas描画エリア　始まり
	ctx.fillStyle = '#fdd735';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.lineWidth = 2;
	ctx.fillStyle = "#000";
	ctx.font = "bold 32px Roboto, Noto Sans JP, sans-serif";
	ctx.fillText('画像っす', 10, 32);
	// canvas描画エリア　終わり

	//　imgタグにcanvasで作った画像urlを挿入
	var png = canvas.toDataURL();
	document.getElementById("img").src = png;
}
</script>

↓canvas

↓画像