javascript - マウス座標に基づいて楕円を選択し、div から座席 ID を取得する

Question

ベースの Select Your Own Seat 予約システムを作成しcanvasていますが、サークルの 1 つがクリックされたかどうかを判断する方法がわかりません。座席は、 から返された XML データで満たされた配列からのプルに基づいて動的に描画されCRM systemます。これが役立つと考えて、「this」キーワードを使用しようとしました。座標を使用して選択された座席を特定し、その座席の ID を返して CRM を介して予約をリクエストできると考えました。

多次元配列を作成し、これに座標と座席 ID を入力する必要がありますか?

    document.addEventListener('DOMContentLoaded',domloaded,false);
    function domloaded(){
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    var allseats = document.getElementsByClassName("seat");
    var arr = Array.prototype.slice.call(allseats); 

        for (var j=0; j<arr.length; j++)
       {
    //Get seat status
    var status = arr[j].getAttribute("data-seat-status");
    //Get row position
    var top = arr[j].getAttribute("data-top");
    //Get column position
    var left = arr[j].getAttribute("data-left");
    //Get seat id
    var id = arr[j].getAttribute("id");

    var sAngle = 0;
    var eAngle = 2*Math.PI;

    //Create more space between seats
    left=(left*10);
    top=(top*10);

     var seat = function(){
     function seat(x, y) {
        this.color = "white";
        this.x = left;
        this.y = top;
        this.radius = 4;
    }
        seat.prototype.draw = function (ctx) {
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        ctx.fill();
    };
        return seat;
    }();
    var drawSeats=new seat(top,left);
    drawSeats.draw(ctx);    

    }
    canvas.onmousedown=function findseats(arr){


  var xleft=arr.clientX;
  var ytop=arr.clientY;
  alert("X coords: " + xleft + ", Y coords: " + ytop);
    for (s=0; s<arr.length; s++){
        if((xleft||((arr[s].getAttribute("data-left")*10)&&(ytop||arr[s].getAttribute("data-top")*10)))){
            alert(arr[s].getAttribute("data-id"));
        }

    }
    }}

http://jsfiddle.net/caspianturner/5sycT