Canvas coordinates not the same when deployed to device

I’m creating a module that displays a body diagram and the EMS tech can click on different body parts to calculate total burn area on a victim.

I’m grabbing the coordinates on the javasscript canvas based off the (click) function on the canvas and it works fine in the ionic lab.

Once I deploy to android, the coordinates seem to be off to a point where it’s unusable. Is there a way to get consistent coordinates?

Can you share your code? like what do you do exactly today and what is the method you get coordinates.
There is a big difference between various coordinates available via events (clientX, pageX etc etc)

The whole code would be too much, but here’s the excerpt that includes how I’m getting the coordinates.


    <ion-buttons slot="start">
      <ion-back-button defaultHref="/burntools"></ion-back-button>
    <ion-title>Adult Burn Calculator</ion-title>

<ion-content no-bounce>
  <canvas #canvasEl width="{{this.canvasWd}}" height="400" (touchstart)="touchStart($event)" (touchend)="touchEnd($event)" (click)="clickIt($event)"></canvas>
  <ion-footer class="fixedFooter">
        <ion-button slot="start" (click)="switchSides('front')" color="{{this.frontColor}}">
          <ion-icon name="Body"></ion-icon>
        <span style="font-weight: 700;">Burn %: {{this.theScore}}</span>
        <ion-button (click)="switchSides('back')" color="{{this.backColor}}" slot="end">
          <ion-icon name="body"></ion-icon>

ts file excerpt

  clickIt(ev) {
    console.log('Click It');
    const canvasPosition = this.canvasElement.getBoundingClientRect();

    console.log('x', ev.clientX - canvasPosition.x);
    console.log('y', ev.clientY - canvasPosition.y);

    const tempX = ev.clientX - canvasPosition.x;
    const tempY = ev.clientY - canvasPosition.y;

I’m then checks the tempX,tempY against coordinates I’ve mapped of the actually pieces.

Quick question - why would you need to put ion-footer inside of ion-content? can’t you place footer right after ion-content?

Originally it was, but I was playing with it to see if it was throwing off the coordinates. I just didn’t bother updating the code back to the original state.