# Placement of sliders outside canvas

**URL:** <https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631>\
**Category:** Coding Questions\
**Created:** [March 26, 2019, 9:15am UTC](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631 "2019-03-26T09:15:41Z")\
**Posts on this page:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 27, 2019, 9:04am UTC](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631/9 "2019-03-27T09:04:53Z")

</div>

> [@kll](#):
>
> Now works also when the canvas is not at 0,0.

Oopsy, totally forgotten that not all p5js canvases are at browser’s position (0, 0)! 🤦‍♂️

Anyways, here are some “tricks”: 🧙

We don’t need to store the p5.Renderer returned by the p5:**createCanvas()** in some global variable. 🏪

p5js already does it for us under its “secret” variables _\_renderer_ & _\_curElement_: 🕵️‍♂️

> [@hint(DISABLE\_DEPTH\_TEST) in P5](https://discourse.processing.org/t/hint-disable-depth-test-in-p5/5595/7):
>
> Shortest way to reach the sketch’s canvas rendering context is via undocumented variable drawingContext: gl = drawingContext; The canvas itself is under undocumented variable canvas. And its wrapper is under both undocumented variables \_renderer & \_curElement.

So, in order to grab sketch’s main canvas coordinates, we just need: `_renderer.position()`. 😸

Of course, don’t forget to import “p5.dom.js” for the p5.Element::**position()** method. 😳

Another 1 is that all the _id_ attributes secretly become global variables already. 🤫

So rather than `parent('canvasposition')` as a string, simply pass the _id_ global variable: `parent(canvasposition)`. 😋

---

_[View the full topic](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631)._