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)

like this

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!