How do I implement a diamond-shaped strategy map in Canvas while keeping the selection of squares on hover?

  • 0
    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 drawImage ()
    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)



    that's it


    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!
    JavaScript Anonymous, Apr 15, 2019

  • 1 Answers
  • 0
    What you are looking for is called isometry. See examples: 1 , 2 . You can check which tile you are in with isPointInPath (and create the tiles themselves through Path2D ).
    Harper Levine

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!