Question

I have a basic isometric map with some sprites loaded on the map in a html canvas.

I am wondering though, is it possible to click the canvas, to a pixel accurate level and have JS work out what you clicked in the canvas?

If so is there also a way to do it without a library?

Answer 1

The Canvas API has the isPointInPath(x, y) method, which allows you to determine if a point (x, y) is inside the current path (or on it).

Now if you already have many shapes in your canvas and want to know which one was clicked, and do not want to use a library, you will have to maintain a list or map of objects representing those shapes and have an onclick event handler that iterates through it and performs some calculations.

Such a list could look like

var shapeList = [
    {shape: "rect",   x0: 100, y0: 100, x1: 200, y1: 150},
    {shape: "circle", x0: 400, y0: 400, r: 50},
    ...
];

Fortunately, there are libraries out there that can do this job for you. You can check for instance crafty.js or lime.js. These are useful libraries for Canvas game development.

For exemple, using Crafty’s containsPoint(x, y) method:

var circle = new Crafty.circle(0, 0, 10);
console.log(circle.containsPoint(0, 0));   // true
console.log(circle.containsPoint(50, 50)); // false