スポンサーリンク

canvas上のマウス座標を取得する。【JS】

HTML

スポンサーリンク

概要

HTMLのcanvasの上でマウスを動かした時の座標の取得方法を紹介します。

考え方


canvas上のマウス座標 = window上のマウス座標 – canvasの左上の座標

という考え方で取得します。

サンプルコード

以下のようにHTMLを書きます。

<canvas id="canvas"></canvas>

マウスが動いた時にcanvas上の座標が出力されます。
getBoundingClientRectでDOM要素の座標とサイズが取得できます。

const canvas = document.getElementById("canvas")

canvas.addEventListener("mousemove", (e) => {
    var rect = e.target.getBoundingClientRect()
    var x = e.clientX - rect.left
    var y = e.clientY - rect.top
    console.log(`${x}:${y}`)
});

クリックした時の座標の取得は以下のように実装することで実現できます。

const canvas = document.getElementById("canvas")

canvas.addEventListener("click", (e) => {
    var rect = e.target.getBoundingClientRect()
    var x = e.clientX - rect.left
    var y = e.clientY - rect.top
    console.log(`${x}:${y}`)
});

デモ

ブラウザで画像をcanvasに描画 + マウス座標を表示 + ロギングするデモを作りました。


※外部ウィンドウで開く

ソース

<input type="file" id="file">
<hr>
<canvas id="canvas"></canvas>
<hr>
<pre id="debug"></pre>
<hr>
<textarea id="textarea"></textarea>
const canvas = document.getElementById('canvas');

document.getElementById("file").addEventListener("change", function (e) {
	var file = e.target.files;
	var reader = new FileReader();

	reader.readAsDataURL(file[0]);

	reader.onload = function () {
		var src = reader.result;
		drawCanvas(src);
	};
}, false);

canvas.addEventListener("mousemove", function(e){
	var borderWidth = 1;
	var rect = e.target.getBoundingClientRect();
	var x = e.clientX - rect.left - borderWidth;
	var y = e.clientY - rect.top - borderWidth;
	document.getElementById("debug").innerHTML = `${x}:${y}`
});

canvas.addEventListener("click", function(e){
	var borderWidth = 1;
	var rect = e.target.getBoundingClientRect();
	var x = e.clientX - rect.left - borderWidth;
	var y = e.clientY - rect.top - borderWidth;
	document.getElementById("textarea").value += `${x}:${y}\n`
});

function drawCanvas(source) {
	if (canvas.getContext('2d')) {
		var context = canvas.getContext('2d');
		var image = new Image();
		image.src = source;
		image.onload = function () {
			canvas.width = image.width;
			canvas.height = image.height;
			context.drawImage(image, 0, 0);
		};
	}
}

参考

FileAPIで画像を読み込み → canvasに描画
概要「FileAPIを使って画像を読み込み、イベント終了と同時に自動的にcanvasに描画したい!」FileAPIを使って読み込んだ画像を、imgタグを使って画像を表示をすることは容易であったが、canvasに描画するのに少々手間...
タイトルとURLをコピーしました