Canvas - Isometric view by transform, determine which tile is mouse on

Question

I'm trying to make actual hover on tiles when the canvas is transformed.

The render function:

ctx.save()
ctx.transform(1, 0.5, -1, 0.5, 250, 150)
// ctx.setTransform(1, 0.5, -1, 0.5, 250, 150)

Terrain.forEach((line, lineNumber) => {
  line.forEach((tile, blockNumber) => {
    const block = new Block({
      ...resolveBlock(tile),
      position: {
        x: blockNumber * 32 + 250,
        y: lineNumber * 32
      },
      size: {
        width: 32,
        height: 32
      }
    })

    // check if the mouse position is on tile
    block.mousePos(frameNow)
    block.render()
  })
})

ctx.restore()

The mousePos function which is working on

ctx.rotate(Math.PI / 4)

but not on the full ctx.transform(...) or even ctx.scale(1, 0.5)

function mousePos() {
  let currentX =
    mousePos.x * Math.cos(-(Math.PI / 4)) -
    mousePos.y * Math.sin(-(Math.PI / 4))

  let currentY =
    mousePos.x * Math.sin(-(Math.PI / 4)) +
    mousePos.y * Math.cos(-(Math.PI / 4))

  if (
    currentX >= this.position.x &&
    currentX <= this.position.x + this.size.width - 1 &&
    currentY >= this.position.y &&
    currentY <= this.position.y + this.size.height - 1
  ) { // change color of hovered tile... }
}

Thanks for your time.

Possible duplicate of [Best way to transform mouse coordinates to HTML5 Canvas's transformed context](https://stackoverflow.com/questions/40835163/best-way-to-transform-mouse-coordinates-to-html5-canvass-transformed-context) — AuxTaco, Dec 06 '17 at 21:09
I tried it but no luck, unfortunately :( Maybe I didn't understand it truly. Some example? — Estkin Krow, Dec 06 '17 at 21:15

score 0 · Accepted Answer · answered Dec 06 '17 at 22:32

Found the solution after some brainstorming; find the mouse position after transform

const invertedTransform = ctx.mozCurrentTransformInverse()
// sadly there is no currentTransformInverse in all browsers yet

const wX =
  mousePos.x * invertedTransform.a +
  mousePos.y +
  invertedTransform.c +
  invertedTransform.e

const wY =
  mousePos.x * invertedTransform.b +
  mousePos.y +
  invertedTransform.d +
  invertedTransform.f

Canvas - Isometric view by transform, determine which tile is mouse on

1 Answers1