HTML5 Canvas Question | Click Tracking

Recently, I have started dabbling with HTML5 and the mighty canvas. However, I am trying to accomplish something and I am not sure what the best way would be to handle it.

I am trying to make a randomly generated set of buildings with windows, as you can see in the following example that uses divs:

Example Using Divs

The issue that I am coming up with is that I want to be able to randomly generate images/content in the windows of these buildings, and be able to easily capture when a window is clicked, but I am not sure how to go about handling it usin开发者_如何学JAVAg the canvas.

Example Building:

function Building()
{
     this.floors  = Math.floor((Math.random()+1)*7); //Number of Floors
     this.windows = Math.floor((Math.random()+1)*3); //Windows per Floor
     this.height  = (this.floors*12);                //1px window padding 
     this.width   = (this.windows*12);               //1px window padding

     //Do I need to build an array with all of my windows and their locations
     //to determine if a click occurs?
}

Example Window:

function Window(x,y)
{
     this.x = x;    //X Coordinate 
     this.y = y;    //Y Coordinate
     this.color =   //Random color from a range
     this.hasPerson //Determines if a person in is the window
     this.hasObject //Determines if an object is in the window
}

Summary: I am trying to generate random buildings with windows, however I am unsure how to go about building them, displaying them and tracking window locations using the canvas.

UPDATE:

I was finally able to get the buildings to generate as I was looking for, however now all I need to do is generate the windows within the buildings and keep track of their locations.

Building Generation Demo

---

I guess if you are drawing the window, you already have the function to create their canvas path.
So you can apply the isPointInPath function on all window you have to determine if the user clicked on a window.

 canvasContext.beginPath()
 {
    (functions corresponding to your window path)
 }
canvasContext.closePath()
var isInWindow = canvasContext.isInPath(clicPosX,clicPosY);

---

Actualy you have to check where mouse is clicked, and if it's in window, then call some function. And yes, you will need to have array, of locations.

Take a look here

---

Draw your squares using fillRect, store their north-western point coordinates into an array. You'll also need these rectangles' dimensions, but since they are all equal squares — no need to store them in the array.

Then add a click listener to the canvas element, in which detect the pointer's position via pageX/pageY minus the position of the canvas element.

Then on each click traverse the array of rectangles and see if they contain the pointer's coordinates:

if (((pageX > rectX && pageX < rectX + rectWidth) || (pageX < rectX && pageX > rectX + rectWidth))) &&
    ((pageY > rectY && pageY < rectY + rectHeight) || (pageY < rectY && pageY > rectY + rectHeight))) { 
    /* clicked on a window */
}

Demo.