Canvas detect click position.

[jolly otter]

Hello guys how do i can detect position of clicked image in my example ?
here is example ` https://stackblitz.com/edit/angular-ivy-vuy3fn?file=src%2Fapp%2Fapp.component.ts

[sand saffron]

idk id this helps: <canvas id="canvas" (click)="test($event)"></canvas>
in the click event you have the coordinates. Then you can calculate wich image was clicked

[jolly otter]

@sand saffron I almost got it but after zoom in or zoom out its work wrong (try click on images).https://stackblitz.com/edit/angular-ivy-vuy3fn?file=src%2Fapp%2Fapp.component.ts

i think need to do something with camera zoom.

[sand saffron]

      drawRect(
        0 - (cameraOffset.x - mousePos.x) / cameraZoom, //<-here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        0 - (cameraOffset.y - mousePos.y) / cameraZoom,
        10,
        10
      );

also I think getMouseCoords is wrong:

    const getMouseCoords = (canvasArg, event) => {
      const canvasCoords = canvasArg.getBoundingClientRect();
      return {
        x: event.pageX,
        y: event.pageY,
      };
    };

and you are programming in typescript and not javascript.
therefore:

[jolly otter]

😅

[sand saffron]

private getMouseCoords(canvasArg, event):{x:number, y:number}{
      const canvasCoords = canvasArg.getBoundingClientRect();
      return {
        x: event.pageX,
        y: event.pageY,
      };
    };

and then you do: this.getMouseCoords(

do not declare all the functions inside ngAfterViewInit 😉

[jolly otter]

Are trying to do drag after zoom ? and after click on image 🤔

i tried to do the same but after drag i got problems

[sand saffron]

true after drag it's wrong 😦