[JavaScript] マウスでcanvasにお絵描きする現代的な方法

JavaScriptでマウスを使ってcanvasにお絵描きするコードの作り方。2022年版。

動作サンプルとソースコード

以下の動作サンプルでは、赤枠の中でマウスをドラッグすると線を描くことができます。

マウスでお絵描きのコード

<canvas id="$canvas" width="600" height="200" style="border:solid 1px red"></canvas>

<script>
const context = $canvas.getContext('2d')

$canvas.onpointermove = function(e){
    if(e.buttons){ // ドラッグ中なら
        context.beginPath()
        context.moveTo(e.offsetX-e.movementX, e.offsetY-e.movementY) // 始点
        context.lineTo(e.offsetX, e.offsetY) // 終点
        context.stroke() // 線を引く
        this.setPointerCapture(e.pointerId) // マウスがcanvasからはみ出た時も捕捉する
    }
}
</script>

ドラッグ中かどうかの判定方法、始点の算出方法、マウスがはみ出た時の対処方法あたりがポイント。
機能的には、canvasの外からでも描き始めることができるのが利点。

ドラッグ処理は時々出てくるので、覚えておいて損はないコードです。

元ネタ