如何使每个画布对象“可点击”？

Question

我想到了如何检测canvas中的鼠标点击。现在我需要解决这两件事：

1. 是否可以调用包含数组中特定图形的函数？那是因为绘制的区域被划分为不同的功能，因此，我想“导入”这样的功能。
2. 如何将对象的位置与其信息“链接”？

以下是使rect()“可点击”的代码：

function clickBooth() {
  elemLeft = canvas.offsetLeft,
  elemTop = canvas.offsetTop,
  context = canvas.getContext('2d'),
  elements = [];
  var boothTF = drawBoothGroup35;

// Add event listener for `click` events.
canvas.addEventListener('click', function(event) {
  var x = event.pageX - elemLeft,
      y = event.pageY - elemTop;
  console.log(x, y);
  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');
      }
  });

}, false);

// Add element. Can I just add the functions here??
elements.push({
   colour: '#05EFFF',
   width: 150,
   height: 100,
   top: 20,
   left: 15
   }
);

// Render elements.
elements.forEach(function(element) {
   context.fillStyle = element.colour;
   context.fillRect(element.left, element.top, element.width, element.height);
   });
   }
console.log(clickBooth);

我正在尝试实现以下互动： 点击绿框（展位）＆gt; ??? （这是我失去的地方）＆gt; 在iFram中显示绿框（展位）信息 e（最右边的红色矩形）



这是我所取得成就的实时样本：https://codepen.io/izwicky/pen/xzKWYX