# Custom canvas size with orbitcontrols and raycaster

**URL:** <https://discourse.threejs.org/t/custom-canvas-size-with-orbitcontrols-and-raycaster/18742>\
**Category:** Questions\
**Tags:** canvas, canvas-renderer\
**Created:** [September 16, 2020, 8:13am UTC](https://discourse.threejs.org/t/custom-canvas-size-with-orbitcontrols-and-raycaster/18742 "2020-09-16T08:13:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![RAUMIK\_RANA](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/raumik_rana/32/12395_2.png) [@RAUMIK\_RANA](https://discourse.threejs.org/u/RAUMIK_RANA)\
**Post date:** [September 16, 2020, 8:13am UTC](https://discourse.threejs.org/t/custom-canvas-size-with-orbitcontrols-and-raycaster/18742/1 "2020-09-16T08:13:19Z")

</div>

As you can see in below image I want my canvas in custom size.  
I want to do some other stuff with remaining windows area.  
but I also want orbitcontrols and raycaster to work proper.

what is reliable method to do that?

 ![canvassize](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/99076e6de927fb65b2709c06861c2d210c0b6a2e.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 16, 2020, 9:05am UTC](https://discourse.threejs.org/t/custom-canvas-size-with-orbitcontrols-and-raycaster/18742/2 "2020-09-16T09:05:36Z")

</div>

> [@RAUMIK\_RANA](#):
>
> but I also want orbitcontrols and raycaster to work proper.

When creating `OrbitControls`, you should always passing the renderer’s canvas element to the ctor.

```js
const controls = new OrbitControls( camera, renderer.domElement );

```

Raycasting has to take into account a possible offset of the canvas like so:

```js
const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

```