Canvasでお絵描きできるようにする

ツクモン

Canvas要素を使ってマウスのドラッグ操作で線を引けるようにする。
鋭意制作中。
今は参考サイト丸パクリ状態です。
ここから改良してきますのでご容赦ください。

ツクモン

参考サイト

メインの処理

Canvasの解説

ツクモン

改良点

線の引き始めがずれる
Canvas要素を画面真ん中に配置した時に線がかかれない（上に起因する？）
コードの理屈を体系的に理解してない

ツクモン

線の引きはじめのズレを解消

// 線を描く座標をマウスの位置に合わせる
// 現在のマウス位置がページの左上からの相対位置で出力されるので、
// canvas要素の左上の座標を引き算することで実現
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
draw(x, y);

参考

ツクモン

コードの書き方も理解してきた。
だいたいこんなイメージか。
canvas内のマウスの座標を取得し、ドラッグが始まった座標から動かした座標へ線を引く、ドラッグ中は前にドラッグされて移動した座標から今ドラッグされて移動した座標への線を引く、マウスが離されたら終了。

moveTo：線の始点に移動する（鉛筆を書き始めに持ってくる）
lineTo：線の終点に移動し、視点とを結ぶ（鉛筆を動かす）
stroke：線が実際に引かれる（紙に線が描かれる）
beginPath：線の書き始めを宣言
closePath：線の書き終わりを宣言
lineCap：線の終わりの形状を指定（roundで丸く）
lineJoin：引かれる線をどのような形状でくっつけるか？

参考

ツクモン

MDNに参考コードがあった。
canvas内の座標計算などがすっきりしていて好み。

このコードを参考に、自分で組み直してみよう

ツクモン

色変更機能を追加

const colorButtons = document.querySelectorAll(".color");
colorButtons.forEach((btn) => {
	btn.addEventListener("click", () => {
		switch (btn.id) {
			case "black":
				ctx.strokeStyle = black;
				break;
			case "red":
				ctx.strokeStyle = red;
				break;
			case "blue":
				ctx.strokeStyle = blue;
				break;
			case "green":
				ctx.strokeStyle = green;
				break;
			default:
				ctx.strokeStyle = black;
		}
	});
});

ツクモン

画像の描画機能（スタンプ）を追加

参考

ツクモン

透明度と太さの変更を追加
（透明度だけうまくいかない...線を...線を引く間隔が細かいから塗りつぶされて濃くなるのか...？）

	const sizeChange = document.getElementById("size");
	const size = document.querySelector(".size");
	sizeChange.addEventListener("input", () => {
		size.textContent = `${sizeChange.value}px`;
		ctx.lineWidth = sizeChange.value;
	});

	const alphaChange = document.getElementById("alpha");
	const alpha = document.querySelector(".alpha");
	alphaChange.addEventListener("input", () => {
		currentAlpha = alphaChange.value;
		alpha.textContent = `${currentAlpha}`;
		ctx.strokeStyle = `rgba(${currentColor}, ${currentAlpha})`;
	});

ツクモン

リサイズに対応してクローズしたい