Canvas で作った画像をダウンロード・リロードする方法

最近、Canvas を勉強しています。

かっこいい GenerativeArt を作ってみたいんですよね。

けど、JavaScript を理解していないので、常につまずいてます。

Canvas（JavaScript）で画像のダウンロード方法がわからなかったのですが、やっとできました。

すぐ忘れそうなので自分用のメモとして残します。

▼ toDataURL

このコードでダウンロードができました。

let a = document.createElement('a');
a.href = canvas.toDataURL('image/jpeg', 1.0);
a.download = 'canvas-download';
a.click();

まだ、あまり理解できていません。。

公式含めいろんな記事を参考して、とりあえず動くようになりました。

少しずつ理解しようと思ってます。

ついでに画面をリロード（再読み込み）する方法もわかりました。

window.location.reload();

リロードボタンは便利ですね。

こんな感じの画像を作ってみました。

コードはこちら↓

	(() => {
	let canvas = null;
	let sWidth = null;
	let sHeight = null;
	let ctx = null;

	window.addEventListener(
	'load',
	() => {
	initialize();
	render();
	},
	false
	);

	function initialize() {
	canvas = document.getElementById('canvas');
	sWidth = canvas.width;
	sHeight = canvas.height;
	ctx = canvas.getContext('2d');
	}

	function render() {
	// background
	ctx.fillStyle = 'powderblue';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	for (let i = 0; i < 100; i++) {
	drawRect();
	}
	}

	function drawRect() {
	// arc
	ctx.beginPath();
	ctx.arc(
	Math.random() * sWidth,
	Math.random() * sHeight,
	Math.random() * 100,
	0,
	Math.PI * 2,
	false
	);
	ctx.strokeStyle = 'mignightblue';
	ctx.stroke();
	}

	// reload
	// <button id='rld'>reload</button>;
	let rld = document.getElementById('rld');
	rld.addEventListener(
	'click',
	() => {
	window.location.reload();
	},
	false
	);

	// image download
	// <button id='dld'>download</button>;
	let dld = document.getElementById('dld');
	dld.addEventListener(
	'click',
	() => {
	let a = document.createElement('a');
	a.href = canvas.toDataURL('image/jpeg', 1.0);
	a.download = 'canvas-download';
	a.click();
	},
	false
	);
	})();

view raw canvas_download.js hosted with ❤ by GitHub

CanvasはちゃんとJavaScriptなので、JavaScriptの勉強をしなきゃいけないですね。。