+1 vote
by
I don't understand how to make it so that after transforming a canvas context with the functions rotate(); translate();
the coordinates at each superimposed square by the picture through drawImage()
are shifted, and it is no longer possible to catch the coordinates relative to the Canvas itself. It turns out that the cursor has one coordinate when hovering over the Canvas, and the displaced squares have other coordinates.

How you can implement this idea. There is a variant through diamond-shaped png pictures, but after adding from the function drawImage()

They still turn out to be square, and on the canvas, when you hover the cursor over such an image, the event does not work correctly.

I want to get one of these (everything works correctly)

5f9e7ab95a9c8651803043.jpeg


like this
5f9e7af47a15a883077138.jpeg

applied here
ctx.rotate(45 * Math.PI / 180);
ctx.translate(200, -250);

and, accordingly, the coordinates when hovering over the square of the tile, the wrong one is highlighted. Thank you!

1 Answer

0 votes
by
 
Best answer
What you are looking for is called isometry. Take a look at the examples: 1 , 2 . You can check in which tile you are using isPointInPath (and create the tiles themselves via Path2D ).
...