Javascript 跟踪画布上的形状

我试图找到一种合适的方法来识别画布上的各个形状。我正在创建一个座位预订工具，允许用户在网格上定位矩形，该网格将以某种方式保存座位位置信息（首先是座位号）

目前我有一个形状函数：

function Shape(x, y, w, h, fill) { 
   this.x = x || 0;
   this.y = y || 0;
   this.w = w || 1;
   this.h = h || 1;
   this.fill = fill || '#AAAAAA';
 }

和一个原型来提供上下文

Shape.prototype.draw = function(ctx) {
  ctx.fillStyle = this.fill;
  ctx.fillRect(this.x, this.y, this.w, this.h);
 }

现在，由于我只是在测试并尝试学习如何做到这一点，我已经设置了一个双击事件侦听器来运行以下程序

canvas.addEventListener('dblclick', function(e) {
var mouse = myState.getMouse(e);
  for(var i=0; i <= 180; i += 20){  
      for(var j = 0; j <= 225; j += 25){            
           myState.addShape(new Shape(mouse.x + i, mouse.y + j, 15, 20, 'rgba(0,255,0,.6)'));       
    }}
 }, true); 

canvas.addEventListener（'dblclick'，函数（e）{
var mouse=myState.getMouse（e）；
对于（var i=0；i您最好使用SVG（这是一个利用SVG的强大兼容性库）如果元素必须是交互的，则尝试这样做。绘制元素后，画布无法识别绘制的元素，因此您必须为每个项目使用单独的画布，或者在进行更改时必须重新绘制整个画布。
噢！实际上看起来非常好。您是否可以了解这是如何工作的？根据我的建议它仍然使用画布（？），但将每个形状视为一个对象？不，它在支持画布的平台上使用可缩放矢量图形，在不支持SVG的旧IE平台上使用VML