I don't understand how to make it so that after transforming a canvas context with the functions
the coordinates at each superimposed square by the picture through
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
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)
ctx.rotate(45 * Math.PI / 180);
and, accordingly, the coordinates when hovering over the square of the tile, the wrong one is highlighted. Thank you!