(pixi.js)canvas上でのマウス座標検知について

Question

pixi.jsでマウスカーソルを動かし座標を取得する関数を用意したのですが、
canvas上以外でも動作を検知しています。
これは仕様なのでしょうか・・?

const canvas = document.getElementById("myCanvasText");

const app = new PIXI.Application({
        width: 500,
        height: 500,
        view: canvas,
        resolution: window.devicePixelRatio,
        autoResize: true,
        antialias: true,
        autoDensity: true
});
app.stage.interactive = true;

function onPointerMove(event) {
   console.log("onPointerMove"); //カーソル操作時発火
}
app.stage.on("pointermove", onPointerMove);

このような記述をしています。
canvas領域以外の部分でマウスを操作してもconsoleが出てしまっています。

app.stageというのはcanvas要素と同義と認識していたのですが、間違っているのでしょうか。。
また、canvas内でのみカーソル操作を検知したい場合、どのように記述できるかアドバイスいただけると幸いです。

よろしくお願いします。

Answer 1

app.stageというのはcanvas要素と同義と認識

この部分の認識が違うようです。
console.log(app.stage);で見てみるとわかりますが、
app.stageはcanvas要素ではなく、app.viewのほうがcanvas要素です。

canvas内のみでのカーソル操作は通常のJSのイベントで検知すれば良いかと思います。

https://codepen.io/mattari-panda/pen/QXBZOe

Comments

[okpk]

回答ありがとうございます。
app.viewがcanvas要素なんですね。
codepenまで用意いただき、ありがとうございます。

また、このような方法も見つけました。
http://jsfiddle.net/qc73ufbh/