Mouse position is off when resolution is greater than 1

[eguneys]

When I set the resolution with

PIXI.settings.RESOLUTION = window.devicePixelRatio;

 

if this is greater than 1, when I drag an item, mouse position is getting higher than actual, so the dragged image is getting more to the left.

 

I've set up an example to show what I mean, try dragging the red rectangle: https://stackblitz.com/edit/js-yxp7ed

 

This is how I get the mouse event position:

  function eventPosition(e) {
    let x = e.clientX,
        y = e.clientY;

        let bounds = canvas.getBoundingClientRect();

        x -= bounds.x;
        y -= bounds.y;

        return [x, y];
  }

Some information about why I would want to use this RESOLUTION = devicePixelRatio feature would be cool.

[ivan.popelyshev]

You use your custom interaction and ask why it doesnt work with pixi coords. Two ways to fix that

1. use pixi interaction

2. Look at how pixi InteractionManager does it, and adjust your method: https://github.com/pixijs/pixi.js/blob/dev/packages/interaction/src/InteractionManager.ts#L1138