Canvasで四角を広げたり縮めたり

JavaScriptの勉強をしています。今は、主にCanvasを中心に取り組んでいます。

今回は、マウスの動きに対応したものです。
今回もいつもどおりコードの意味はよくわかっていないのですが、とりあえず動いているので記録として残します。

どこかのサイトを参考にした気がするのですが、忘れてしまいました。。。

canvas.addEventListener('mousemove', (e) => {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// background
	ctx.fillStyle = 'lightslategrey';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	rect = e.target.getBoundingClientRect();
	x = e.clientX - rect.left;
	y = e.clientY - rect.top;

	// rect
	ctx.fillStyle = 'limegreen';
	ctx.fillRect(10, 10, x, y);
});

「mousemove」と「getBoundingClientRect」を初めて使ったのですが、getBoundingClientRectの方はピンときていません。。。

何度か使ううちに理解できる、と楽観視しています。

mousemove↓

Element: mousemove イベント

getBoundingClientRect↓

Element.getBoundingClientRect() - Web API | MDN

個人サイト（記録用の素材置場）に今回のものがあるので、触ってみたいかたはどうぞ↓

canvas | notenonote