# Placement of sliders outside canvas **URL:** \ **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:** 9\ **Page:** 1
**Author:** ![mpsteenstrup](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@mpsteenstrup](https://discourse.processing.org/u/mpsteenstrup)\ **Post date:** [March 26, 2019, 9:15am UTC](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631/1 "2019-03-26T09:15:41Z")
Hi i am trying to place sliders directly under the canvas, but other text added to html keep getting in between. Does anyone have a solution to keep the sliders and buttons next to the canvas? the problem is visible here [REF.](http://mpsteenstrup.dk/findFarven.html), as well as the sourcecode. Best regards Mads Peter ---
**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 26, 2019, 10:37am UTC](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631/2 "2019-03-26T10:37:57Z")
Perhaps something like this sketch below, which positions the p5js canvas between 2 images: > > > There are more than three files. show original But instead of canvas, you’re gonna need to apply the same general idea to your sliders. Simply create an empty `` w/ an _id_ attribute right after the p5js’ `` element. Then invoke method p5.Element::**parent()** over each slider, so they are moved inside the container w/ the specified _id_. For more details, go to the sketch’s original forum post: > [@Getting a sketch to load between two images on a web page](https://discourse.processing.org/t/getting-a-sketch-to-load-between-two-images-on-a-web-page/7734): > > I’d like the script with the sketch.js to load between the two images, but it keeps loading at the end of the two images. Just learning HTML so any help would be great! Thanks! Web page: [http://www.abunchoffailures.com/](http://www.abunchoffailures.com/) Here is the HTML: \ \ \ \

header text

RGB slider:

end text

``` sketch.js ```auto // DOM // https://p5js.org/reference/#/libraries/p5.dom // https://p5js.org/reference/#/p5.Element/position // change slider to outside canvas control and test // and absolute position for "calculation" elements ON canvas // // https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631/6 var inputw1, inputw2, buttonadd, buttonsub, showadd, showsub, outputadd=0, outputsub=0; var rSlider, gSlider, bSlider; var r=0,g=0,b=0; var cnv,cnvat; function setup() { // create canvas cnv = createCanvas(700, 300).parent('canvasposition'); check_pos(); // read where the canvas has its x0,y0 textAlign(CENTER); textSize(20); //two input windows and calculation buttons and result text ON canvas positioned inputw1 = createInput(30); inputw1.position(20+cnvat.x, 15+cnvat.y); inputw2 = createInput(10); inputw2.position(20+cnvat.x, 45+cnvat.y); buttonadd = createButton('+'); buttonadd.position(220+cnvat.x, 75+cnvat.y); buttonadd.mousePressed(calcadd); buttonsub = createButton('--'); buttonsub.position(220+cnvat.x,105+cnvat.y); buttonsub.mousePressed(calcsub); showadd = createElement('p', 'add:'); showadd.position(20+cnvat.x, 65+cnvat.y); showsub = createElement('p', 'sub:'); showsub.position(20+cnvat.x, 95+cnvat.y); // slider test ( change from inside canvas to its own position below canvas rSlider = createSlider(0, 255, 200).parent('controlposition'); // rSlider.position(20, height - 25); gSlider = createSlider(0, 255, 200).parent('controlposition'); // gSlider.position(250, height - 25); bSlider = createSlider(0, 255, 0).parent('controlposition'); // bSlider.position(490, height - 25); } function calcadd() { var intxt1 = inputw1.value(); var output1 = float(intxt1); var intxt2 = inputw2.value(); var output2 = float(intxt2); outputadd = output1 + output2; showadd.html('[+] ' + outputadd); } function calcsub() { var intxt1 = inputw1.value(); var output1 = float(intxt1); var intxt2 = inputw2.value(); var output2 = float(intxt2); outputsub = output1 - output2; showsub.html('[-] ' + outputsub); } function get_slider() { r = rSlider.value(); g = gSlider.value(); b = bSlider.value(); } function draw() { background(r,g,b); get_slider(); fill(b,r,g); ellipse(width/2,height/2,outputadd,outputsub); } function check_pos() { cnvat = cnv.position(); print("canvas at : x "+cnvat.x+" y "+cnvat.y); } ``` ---
**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")
> [@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)`. 😋