# Object Position to Canvas Pixel Position

**URL:** <https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099>\
**Category:** Phaser 3\
**Created:** [February 6, 2019, 5:55pm UTC](https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099 "2019-02-06T17:55:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![HyPeRbLaH](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hyperblah/32/657_2.png) [@HyPeRbLaH](https://phaser.discourse.group/u/HyPeRbLaH)\
**Post date:** [February 6, 2019, 5:55pm UTC](https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099/1 "2019-02-06T17:55:48Z")

</div>

Assuming I have some arbitrary game object, is there a way to transform object’s position to canvas pixel space? In otherwords, how would I get the x,y pixel I would need to click on to click on the origin of the object?

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [February 6, 2019, 7:24pm UTC](https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099/2 "2019-02-06T19:24:11Z")

</div>

Hi @HyPeRbLaH,  
If the size of the viewport of your camera is the same as the size of the canvas, this would be a way:

```javascript
// this === scene
var gameObjectCanvasX = gameObject.x - this.cameras.main.scrollX * gameObject.scrollFactorX;
var gameObjectCanvasY = gameObject.y - this.cameras.main.scrollY * gameObject.scrollFactorY;

```

Regards.

---

<div class="post-metadata">

**Author:** ![HyPeRbLaH](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hyperblah/32/657_2.png) [@HyPeRbLaH](https://phaser.discourse.group/u/HyPeRbLaH)\
**Post date:** [February 6, 2019, 7:28pm UTC](https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099/3 "2019-02-06T19:28:06Z")

</div>

Thanks @jjcapellan. Unfortunately my camera viewport will not be the same size as the viewport.

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [February 6, 2019, 8:10pm UTC](https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099/4 "2019-02-06T20:10:25Z")

</div>

Then, you need to add the camera position:

```javascript
// this === scene 
var cam = this.cameras.main;
var gameObjectCanvasX = gameObject.x - cam.scrollX * gameObject.scrollFactorX + cam.x;
var gameObjectCanvasY = gameObject.y - cam.scrollY * gameObject.scrollFactorY + cam.y;

```

---

<div class="post-metadata">

**Author:** ![HyPeRbLaH](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hyperblah/32/657_2.png) [@HyPeRbLaH](https://phaser.discourse.group/u/HyPeRbLaH)\
**Post date:** [February 12, 2019, 8:16pm UTC](https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099/5 "2019-02-12T20:16:32Z")

</div>

What ended up working for me is as follows:

```
// obj is our game object
var mat = obj.getWorldTransformMatrix();

// Get world position;
var x = mat.getX(0, 0);
var y = mat.getY(0, 0);

// Convert world position into canvas pixel space
var cam = this.scene.scene.cameras.main;
var displayScale = cam.scaleManager.displayScale;
mat = cam.matrix;
let tx = mat.getX(x - camera.scrollX, y - camera.scrollY) / displayScale.x;
let ty = mat.getY(x - camera.scrollX, y - camera.scrollY) / displayScale.y;
x = Math.round(tx);
y = Math.round(ty);

```

This seems to handle a bunch of cases like deep hierarchies, rotations, scaled and rotated cameras, scale manager scaling, etc…

---

<div class="post-metadata">

**Author:** ![Aveyder](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@Aveyder](https://phaser.discourse.group/u/Aveyder)\
**Post date:** [May 23, 2020, 2:17pm UTC](https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099/6 "2020-05-23T14:17:19Z")

</div>

Probably this can be a more accurate solution:

```
function GetCanvasPoint(camera: Camera, x: number, y: number, output?: Vector2) {

    if (output === undefined) {
        output = new Vector2();
    }

    const cameraMatrix = (camera as any).matrix.matrix;

    const mva = cameraMatrix[0];
    const mvb = cameraMatrix[1];
    const mvc = cameraMatrix[2];
    const mvd = cameraMatrix[3];
    const mve = cameraMatrix[4];
    const mvf = cameraMatrix[5];

    const determinant = (mva * mvd) - (mvb * mvc);

    if (!determinant) {
        output.x = x;
        output.y = y;

        return output;
    }

    const res = camera.resolution;

    const sx = (mva * x + mvc * y + mve) / res;
    const sy = (mvb * x + mvd * y + mvf) / res;

    const c = Math.cos((camera as any).rotation);
    const s = Math.sin((camera as any).rotation);

    const zoom = camera.zoom;

    const scrollX = camera.scrollX;
    const scrollY = camera.scrollY;

    output.x = sx - (scrollX * c - scrollY * s) * zoom;
    output.y = sy - (scrollX * s + scrollY * c) * zoom;

    return output;
}
```

---

<div class="post-metadata">

**Author:** ![Martin\_Turner](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/martin_turner/32/4193_2.png) [@Martin\_Turner](https://phaser.discourse.group/u/Martin_Turner)\
**Post date:** [November 9, 2020, 6:44am UTC](https://phaser.discourse.group/t/object-position-to-canvas-pixel-position/1099/7 "2020-11-09T06:44:14Z")

</div>

Thanks for this. However I found that the displayScale. bit was throwing my result out. I don’t understand how it works, but when I took out /displayScale.x and /displayScale.y the result i got was correct.

Cheers  
Martin