Mouse Event ไม่ทำงานบน HTML5 Canvas? วิธีแก้ไข

สาเหตุและวิธีแก้

บางครั้ง Canvas ไม่จับ mouse events ได้เนื่องจาก compositing layer หรือ CSS transforms

วิธีที่ 1: บังคับสร้าง Compositing Layer

canvas {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

วิธีที่ 2: เพิ่ม Event Listener ให้ชัดเจน

canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false);

การเพิ่ม listener โดยตรงบน canvas element จะรับประกันว่า event ถูกจับได้