캔버스 요소에 클릭 이벤트 핸들러를 추가하는 방법은 무엇입니까?

// Get the canvas element and its context
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');

// Define an array to store element information
var elements = [];

// Add a click event listener to the canvas
elem.addEventListener('click', function(event) {
  // Calculate the mouse click position relative to the canvas
  var x = event.pageX - elem.offsetLeft;
  var y = event.pageY - elem.offsetTop;

  // Loop through the elements and check for collision
  elements.forEach(function(element) {
    if (y > element.top && y < element.top + element.height 
        && x > element.left && x < element.left + element.width) {
      alert('clicked an element');
    }
  });
});

// Add an element to the array
elements.push({
  colour: '#05EFFF',
  width: 150,
  height: 100,
  top: 20,
  left: 15
});

// Render the element
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);