2

I'm making a 2D isometric map with HTML5 canvas and the library canvasengine.

So, i have a tile : enter image description here

This image is a square.

I draw this image on my canva with several options : 

_tile.drawImage(tileset.name, x, y, this.tile_w, this.tile_h, posx, posy, this.tile_w, this.tile_h);

After that, i need to add an event onclick on this _tile but ONLY on the part in green :

_tile.on("click", function(e) {
    this.opacity = this.opacity < 1 ? 1 : 0.5 ;
});

With this function, i can click on all my picture, white part or not. I had to stack the tiles to generate the map, so when I click on the edge of an image, it selects the next tiles...

I need to do something like, after _tile.drawImage() :

_tile_diamond.onclick

Any ideas ? Thanks !

Clément Andraud
  • 9,103
  • 25
  • 80
  • 158
  • 1
    You can get the color of the clicked pixel: http://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover . Note that you shouldn't use that green color on anything else in the game. (Or you could also check the surrounding 8 pixels) – XCS May 07 '13 at 09:31

1 Answers1

0

You can bind onClick event for the whole canvas not for specific image .. So if you want onClick for image alone , you should store the start and end co-ordinates in a variable and should check the mouse co-ordinates of your click .. This is complex

Use kinetic.js if you want it to be simpler one which does all this on canvas

Prasath K
  • 4,950
  • 7
  • 23
  • 35