CanvasDOM

【JavaScript】 Canvas上でクリックした座標を取得する

更新日：2020/07/09

Canvasは、表示されているサイズと描画をおこなうエリアのサイズがことなります。

そのため、ブラウザ上でクリックされた座標を求めるには一工夫必要です。

 

キャンバス上でのクリック座標を求めるサンプルコード

html


<div id="did">
    <canvas id="can" width="500" height="600"></canvas>
</div>
<div id="output"></div>

css


        #did{
            width: 300px;
            height: 300px;
            margin: auto;
        }
        #canvas{
            width: 100%;
            height: 100%;
            margin: auto;
            border: 1px solid black;
        }
        #output{
            height: 100px;
            overflow: auto;
            background: black;
            color: white;
            padding: 10px;
        }

css


        window.addEventListener( "DOMContentLoaded" , ()=> {

            const cvs = document.getElementById("canvas");
            cvs.addEventListener("click",e=>{
                const rect = e.target.getBoundingClientRect();

                    // ブラウザ上での座標を求める
                const   viewX = e.clientX - rect.left,
                        viewY = e.clientY - rect.top;

                    // 表示サイズとキャンバスの実サイズの比率を求める
                const   scaleWidth =  cvs.clientWidth / cvs.width,
                        scaleHeight =  cvs.clientHeight / cvs.height;

                    // ブラウザ上でのクリック座標をキャンバス上に変換
                const   canvasX = Math.floor( viewX / scaleWidth ),
                        canvasY = Math.floor( viewY / scaleHeight );

                console.log( canvasX,canvasY );
            });
        });

テスト

枠内をクリックしてください

ブラウザ上での座標→キャンバス上で座標で表示されます

 

解説

要素をクリックしたときに引数で渡されるオブジェクトから、ブラウザでのクリック座標を取得できます。

e.clientX : ｘ座標
e.clientY : y座標

e.target.getBoundingClientRect()メソッドは、クリックされた要素の位置や大きさの情報をオブジェクトで取得できます。

このオブジェクトのtopとleftプロパティは、ターゲットとなる要素のブラウザ上での左上座標です。

よって、e.clientXからleftプロパティの値を差し引くと要素上のx座標に、e.clientYからtopプロパティの値を差し引くと要素上のy座標に変換できます。

次に、キャンバスの実サイズと表示されているサイズが異なるため、この点も考慮する必要があります。

キャンバスの実サイズは、キャンバス要素のwidthプロパティとheightプロパティで取得できます。
キャンバスの表示サイズ、clientWidthとclientHeightで取得できます。

この情報から比率を求めて、キャンバス上の座標に変換します。

更新日：2020/07/09

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。