Selecting ellipses based on mouse coordinates and obtaining seat id from div

Question

I'm creating a canvas based Select Your Own Seat booking system and having difficulty working out how to determine whether one of the circles have been clicked on. The seats are dynamically drawn based on pulling from an array filled with XML data returned from the CRM system. I had tried to use the 'this' keyword with the thought that this would help. I thought I could use the coordinates in order to determine which seat was selected then return the ID of that seat in order to request the reservation through the CRM.

Should I create a multi-dimensional array and populate this with the coordinates and the seat 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

Answer 1

A Demo: http://jsfiddle.net/m1erickson/AN4Jf/

You can listen for mousedown events and call handleMouseDown() when the event occurs:

canvas.onmousedown=handleMouseDown;

The mousedown handler gets the mouse position like this:

var canvas=document.getElementById("canvas");
var offsetX=canvas.offsetLeft;
var offsetY=canvas.offsetTop;

function handleMouseDown(e){
    e.preventDefault();

    mouseX=parseInt(e.clientX-offsetX);

    mouseY=parseInt(e.clientY-offsetY);


}

Assume your Seat "class" looks something like this:

// Seat "class"
function Seat(x,y,radius,id,seatNo,color){
    this.x=x-200;  // -200 pulls the seats leftward for better display
    this.y=y;
    this.radius=radius;
    this.id=id;
    this.seatNo=seatNo;
    this.color=color
}

Then you can test if the mousedown occurred in any Seat object like this:

Seat.prototype.isMouseInside=function(mouseX,mouseY){
    var dx=mouseX-this.x;
    var dy=mouseY-this.y;
    return(dx*dx+dy*dy<=this.radius*this.radius);
}