# Get position of pointer event \*relative to canvas height\*

**URL:** <https://discourse.threejs.org/t/get-position-of-pointer-event-relative-to-canvas-height/57047>\
**Category:** Questions\
**Tags:** events, canvas, pointerdown\
**Created:** [October 16, 2023, 1:57am UTC](https://discourse.threejs.org/t/get-position-of-pointer-event-relative-to-canvas-height/57047 "2023-10-16T01:57:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mhfaust](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mhfaust/32/40895_2.png) [@mhfaust](https://discourse.threejs.org/u/mhfaust)\
**Post date:** [October 16, 2023, 1:57am UTC](https://discourse.threejs.org/t/get-position-of-pointer-event-relative-to-canvas-height/57047/1 "2023-10-16T01:57:10Z")

</div>

I need to know whether or not a downPointer event was registered within the upper-half of the canvas. I don’t see any information in the event object that indicates the height of the canvas relative to the measure of the y position of the event. Any clues?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [October 16, 2023, 7:49am UTC](https://discourse.threejs.org/t/get-position-of-pointer-event-relative-to-canvas-height/57047/2 "2023-10-16T07:49:40Z")

</div>

I’m not sure exactly what you need.

In the example [Construction of frames with contour/profile](https://discourse.threejs.org/t/construction-of-frames-with-contour-profile/13490) , the position of the pointer is displayed.

See [ConstructFrame](https://hofk.de/main/threejs/ConstructFrame/ConstructFrame.html) line 1093

```javascript
function onContainerBMouseMove

```

```
getMarkerXY( event.clientX, event.clientY );

reticle.position.set( markerX, markerY, 0 );

xyValue.style.left = event.clientX + 10 + "px";
xyValue.style.top = event.clientY - 10 +"px";

```

`xyValue.innerHTML = Math.round( 10000 *( markerX + 1 ) * sizeFactorL ) / 10000 + " ▪ " + Math.round( 10000 * markerY * sizeFactorL ) / 10000;`

and

`function getMarkerXY( ecX, ecY )`

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [October 16, 2023, 1:51pm UTC](https://discourse.threejs.org/t/get-position-of-pointer-event-relative-to-canvas-height/57047/3 "2023-10-16T13:51:53Z")

</div>

in R3F you can use the Canvas `onPointerDown` event and log it to see all properties available.

```javascript
import { Canvas } from '@react-three/fiber'

export default function App() {
  return (
    <Canvas
      camera={{ position: [1, 1, 1] }}
      onPointerDown={(e) =>
        console.log(e)
      }>
      <gridHelper />
    </Canvas>
  )
}

```

If you wanted just `clientX` and `clientY`, you could use,

```javascript
onPointerDown={({ clientX, clientY }) => console.log(clientX, clientY)}

```