Canvasで使うJavaScriptのMouseEvent

JavaScriptのCanvasも少し勉強しています。
JavaScriptを理解したい、GenerativeArtをしたい、という気分にちょうど良いのがCanvasなんです。 Canvasで最初に戸惑ったのがaddEventListenerで使うMouseEventでした。

MouseEvent

MouseEventは種類が多いイメージがあります。
けど、MDNのサイトで調べたら、Canvasで利用するのは思ったよりも多くなかったです。

developer.mozilla.org

Canvasでよく使うMouseEvent

基本的なイベントは7個くらいだと思います。

click : クリックした時
dbclick : ダブルクリックした時
mousedown : マウスを押した時（クリックした時）
mouseup : マウスを離した時（クリック後）
mousemove : マウスが動いた時
mouseover : マウスが乗った時
mouseout : マウスが外れた時

addEventListenerでよく見る（e）

addEventListenerを使うときによく見る（ｅ）とか（evt）は何か？
このeやevtの中にいろんなイベントが入っていて、DevToolsで確認できます。

使い方は、addEventListenerの関数部分に「(e)=>{}」のように「e」「evt」を入れます。このe、evtでイベントを取得できます。

以下2個はよく使う気がします。

clientX : Windowのxの数値（e.clientX）
clientY : Windowのyの数値（e.clientY）

keydown

上記のイベントはマウスのものだったのですが、キーボードのキーを設定することができます。keydownを使うとキーボードを押したかどうかを判断できます。

イベントで「e.key」とすると特定のキー情報を取ることができます。
たとえば、以下のコードの場合だとキーボードの「s」を押すとCanvasをダウンロードできます。

document.addEventListener('keydown', (e) => {
        if (e.key === 's') {
            let a = document.createElement('a')
            a.href = canvas.toDataURL('image/png', 1.0)
            a.download = 'canvas_0717-1'
            a.click()
        }
    })