วิธีเพิ่ม onClick event handler ให้ HTML5 canvas element

องค์ประกอบที่วาดใน canvas element ไม่มี representation มีเพียงพิกเซลที่ใช้และสีของมัน การวาดบน canvas element หมายถึงการวาด bitmap ใน immediate mode เพื่อรับ click event บน canvas element (รูปทรง) คุณต้องจับ click events บน canvas HTML element และกำหนดว่าองค์ประกอบไหนถูกคลิก ต้องเก็บความกว้างและความสูงขององค์ประกอบ

เพื่อเพิ่ม click event ให้ canvas element ใช้โค้ดด้านล่าง:

canvas.addEventListener('click', function() { }, false);

ตัวอย่าง

เพื่อกำหนดว่าองค์ประกอบไหนถูกคลิก ใช้โค้ดสนิปเพ็ตด้านล่าง:

var e = document.getElementById('myCanvas'),
  elemLeft = e.offsetLeft,
  elemTop = e.offsetTop,
  context = e.getContext('2d'),
  elements = [];
// event listener for click event
e.addEventListener('click', function(event) {
  var xVal = event.pageX - elemLeft,
    yVal = event.pageY - elemTop;
  console.log(xVal, yVal);
  elements.forEach(function(ele) {
    if (yVal > ele.top && yVal < ele.top + ele.height &&
      xVal > ele.left && xVal < ele.left + ele.width) {
      alert('element clicked');
    }
  });
}, false);
elements.push({
  colour: '#1C2128',
  width: 250,
  height: 200,
  top: 30,
  left: 20
});
elements.forEach(function(ele) {
  context.fillStyle = element.colour;
  context.fillRect(ele.left, ele.top, ele.width, ele.height);
});