Question

Say you’ve got a tile image that you use to build an isometric map. Each tile is selectable. The problem is that the transparent corners around the tile image are overlapping the tiles behind them. I want the transparent area of the image to be ignored so that the other tiles can be more accurately selected.

Here is an example of such a tile. The outline has been made red so its easy to see the transparent area.

We’re using a browser that supports pointer-event. I was wondering if there was a way to incorporate that into the corner areas, or if I need to find a way to have the program recognize the transparent pixels on their own.

These tile images are not built using canvas. The CSS is simply this:

div.content 
{
   position: absolute;
   top: 105px;
   width: 10px;
   height: 50%;
}

div.content div.tile 
{
   width:96px;
   position: absolute;
   height:102px;
   line-height:96px;
   background-image:url('images/tiles.png');
}

div.content div.tile:hover 
{ 
   opacity:0.8; 
}

Answer 1

As far as I know, pointer-event applies only to SVG elements.

What I would do

1. create a canvas element for each tile, having the size of the tile
2. draw the tiles into each canvas
3. get the imageData from each canvas context and store it somewhere
4. mousedown events provide coordinates, get the pixel color from that tiles imageData and check it’s alpha value.

edit:

Rethinking it, there could be complications with events, since the tiles in the foreground will probably cover the tiles behind them.
You’ll probably have to let the mousedown events bubble to the container element and manually select the tiles which are “hit” by the click and perform the “per pixel check” on all those.