CODEWITHSUNDEEP
javascripthtmlcanvasdetectionimagemap
eirikrl
eirikrl

Reputation: 438

HTML/JS detecting areas on an image

On web (actually webview in mobile development), I have an image of a basketball court. I need to detect the click(touch) of the area on the court image, whether it is within the 3 point line or outside of it. What is the simplest way of achieving this? Old school image map? SVG? Canvas tag?

Upvotes: 2

Views: 1452

Answers (3)

Mika
Mika

Reputation: 1539

You can use maybe this solution when you don´t use canvas: Click image and get coordinates with Javascript (2006)

For canvas there is a solution, too:

  1. How do I get the coordinates of a mouse click on a canvas element?
  2. Getting mouse location in canvas

The simplest solution is getting an library and use it´s function...

Upvotes: 0

Joseph
Joseph

Reputation: 119837

This is easiest done on a <canvas> element using well known frameworks like Kinetic and Fabric.

You would load the image in the bottom layer, then apply a 3pt layer over the whole image. On top of the 3pt layer is a 2pt layer in the form of an arc. The layering would look like this, from top to bottom:

- 2pt "arc" layer on either side  |
- 3pt "full court" layer          |  Click propagation
- court image                     V

So when the player touches inside the 2pt arc layer, you know it's 2pt. When the player touches outside the arc, it's the 3pt layer that catches the touch. Additionally, frameworks might allow a propagation to underlying layers. You must prevent that one.

Upvotes: 1

Nathan Taylor
Nathan Taylor

Reputation: 24606

An image map would likely be the least complex implementation. Otherwise, you'll want to subscribe to a click anywhere on the court and then examine the mouse coordinates relative to the image.

If I were you, I'd save yourself the pain of writing client-side code for it and just use an image map. They work well for things like this.

http://www.w3schools.com/tags/tag_map.asp

Upvotes: 1

Related Questions