How do I implement a diamond-shaped strategy map in Canvas while keeping the selection of squares on hover?
I don’t understand how to make it so that after transforming the context of the canvas using the
rotate (); translate ();
coordinates of each superimposed square with a picture through
are shifted, and it is no longer possible to catch the coordinates relative to the Canvas itself. It turns out that when the cursor is hovering over the Canvas, the coordinates are different, while the displaced squares have different coordinates.
How can this idea be realized. There is an option through diamond-shaped png images, but after adding from the
drawImage () function
they still turn out to be square, and on the canvas, when you hover over such a picture, the event does not fire correctly.
I want to get out of this (everything works correctly)
ctx.rotate(45 * Math.PI / 180); ctx.translate(200, -250);
To place the code, please use CodePen or similar tool. Thanks you!