# Fixed position with createGraphics

**URL:** <https://discourse.processing.org/t/fixed-position-with-creategraphics/25887>\
**Category:** Beginners\
**Created:** [December 2, 2020, 9:13am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887 "2020-12-02T09:13:45Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 2, 2020, 9:13am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/1 "2020-12-02T09:13:45Z")

</div>

wanna create an always on top fixed position ellipse with createGraphics without being scrolled out of screen, tried `position(0,0,'fixed');` but doesn’t work, code below, ideas? thanks.

```auto
let dot;

function setup() {
  createCanvas(400, 2000);
  dot = createGraphics(50,50);
  dot.position(0,0);
}

function draw() {
  background(220);
  dotDisplay();
}

function dotDisplay(){
  dot.background(0,255);
  fill(255);
  dot.ellipse(25,25,50, 50);
  image(dot,0,0,50, 50);
  dot.position('fixed');
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 2, 2020, 9:42am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/2 "2020-12-02T09:42:49Z")

</div>

Hi @juju  
Not sure what you mean by “scrolled out of screen”, but with a canvas height o 2000, it’s very likely that your browser window has to be scrolled. The PGraphics is fixed to the canvas.

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 2, 2020, 9:48am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/3 "2020-12-02T09:48:42Z")

</div>

I created height of 2000 on purpose to demonstrate when scroll bar appears, I want that PGraphics to always stay at the same position without being affected by the scroll bar.

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 2, 2020, 9:53am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/4 "2020-12-02T09:53:58Z")

</div>

kind of like the \* graphic on the left of this P5 page always stay at the same place even when I scroll up and down.

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/position)**

---

<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:** [December 2, 2020, 10:24am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/6 "2020-12-02T10:24:22Z")

</div>

> [@juju](#):
>
> `dot = createGraphics(50, 50);`

> [@juju](#):
>
> `image(dot, 0, 0, 50, 50);`

> [@juju](#):
>
> `dot.position('fixed');`

The string `'fixed'` is valid only as method **position()**'s 3rd parameter:  
[reference | p5.js](http://p5js.org/reference/#/p5.Element/position)

You’re using **image()** in order to display your _dot_ p5.Element object:  
[reference | p5.js](http://p5js.org/reference/#/p5/image)

That means those coordinates are relative to the sketch’s canvas regardless which **position()** you set.

If you wanna move your _dot_ object relative to some other DOM element you’re gonna need to invoke its method **show()** 1st:  
[reference | p5.js](http://p5js.org/reference/#/p5.Element/show)

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 2, 2020, 10:35am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/7 "2020-12-02T10:35:40Z")

</div>

Thanks for the reply. What if it’s like the animation below? How can I make the dot stay?

```auto
let clockAlpha;

function setup() {
  createCanvas(400, 2000);
}

function draw() {
  background(220);
  timeDotDisplay();
}

  function timeDotDisplay(){
    let s = second();
    if (s % 2 === 0) {
      clockAlpha = 0;
    }
    if (s % 2 != 0) {
      clockAlpha = 255;
    }
    fill(0, clockAlpha);
    noStroke();
    ellipse(25, 100, 50);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 3, 2020, 2:00am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/8 "2020-12-03T02:00:35Z")

</div>

Hi GoToLoop, thanks for pointing the direction. I managed to make the dot stay, but the fill(), noStroke() & flashing animation like the sketch above doesn’t seem to work, any idea? and it seems if I use `image()` after `dot.ellipse()`, there will be two circles. Does that mean I can use `createGraphics()` without using `image()` to display the ellipse in this case? Thanks.

```auto
let dot;
let clockAlpha;
function setup() {
  createCanvas(400, 2000);
  dot = createGraphics(50,50);
  dot.style('display', 'none');
  dot.show();
  dot.position(0,0,'fixed');
}

function draw() {
  background(220);
  dotDisplay();
}

function dotDisplay(){
    let s = second();
    if (s % 2 === 0) {
      clockAlpha = 0;
    }
    if (s % 2 != 0) {
      clockAlpha = 255;
    }
  noStroke();
  fill(0, clockAlpha);    
  dot.ellipse(25,25,50); 
  // image(dot,0,0,50, 50);
}

```

---

<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:** [December 3, 2020, 2:40am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/9 "2020-12-03T02:40:04Z")

</div>

> [@juju](#):
>
> , but the **fill()**, **noStroke()** & flashing animation like the sketch above doesn’t seem to work,

It doesn’t seem like you’re invoking those functions as methods over your p5.Graphics _dot_ object. 🙈

Curiously you call **ellipse()** as a _dot_ method at `dot.ellipse(25,25,50);` but not for the 1s you’ve mentioned above. 🙄

> [@juju](#):
>
> … I can use **createGraphics()** without using **image()** to display the ellipse in this case?

That’s exactly what I’ve implied when I had stated this: 😉

> [@GoToLoop](#):
>
> You’re using **image()** in order to display your _dot_ p5.Element object:

BtW the p5.Graphics object returned by **createGraphics()** is a wrapper for the `<canvas>` element: 🎨

> **[: The Graphics Canvas element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)**
>
> Use the HTML element with either the canvas scripting API or the WebGL API to draw graphics and animations.

Which is directly accessible via its p5.Element inherited property _elt_: 🤓  
[reference | p5.js](http://p5js.org/reference/#/p5.Element/elt)

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 3, 2020, 3:26am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/10 "2020-12-03T03:26:27Z")

</div>

Aww! Got it 😅 thank you. I feel like switching from Processing to P5 is just like learning another language … it’s all over again… glad this community exists.  
One last question, the `clockAlpha` only works as the first argument in `fill()` but not the second (as alpha) I checked the log it’s switching between 255 and 0 no problem, know why?

```auto
let dot;
let clockAlpha;
function setup() {
  createCanvas(400, 2000);
  dot = createGraphics(50,50);
  dot.style('display', 'none');
  dot.show();
  dot.position(0,0,'fixed');
}

function draw() {
  background(255);
  dotDisplay();
}

function dotDisplay(){
    let s = second();
    if (s % 2 === 0) {
      clockAlpha = 0;
    }
    if (s % 2 != 0) {
      clockAlpha = 255;
    }
  dot.noStroke();
  dot.fill(0, clockAlpha); // not working
  // dot.fill(clockAlpha); // works
  dot.ellipse(25,25,50); 
  console.log(clockAlpha);
}

```

---

<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:** [December 3, 2020, 3:34am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/11 "2020-12-03T03:34:24Z")

</div>

> [@juju](#):
>
> , the _clockAlpha_ only works as the first argument in **fill()** but not the second (as alpha)

According to **color()**'s reference the 2 parameters overloaded version the 1st is a gray value and the 2nd is an alpha value:  
[reference | p5.js](http://p5js.org/reference/#/p5/color)

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 3, 2020, 4:02am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/12 "2020-12-03T04:02:17Z")

</div>

Got it, the `background()` in draw only clear the sketch background, I need a background for the dot object for it to work. Thank you GoToLoop.

```auto
let dot;
let clockAlpha;

function setup() {
  createCanvas(400, 2000);
  dot = createGraphics(50,50);
  dot.style('display', 'none');
  dot.show();
  dot.position(0,0,'fixed');
}

function draw() {
  background(255);
  dotDisplay();
}

function dotDisplay(){
    let s = second();
    if (s % 2 === 0) {
      clockAlpha = 255;
    }
    if (s % 2 != 0) {
      clockAlpha = 0;
    }
  dot.noStroke();
  dot.background(255);
  dot.fill(0,clockAlpha); 
  dot.ellipse(25,25,50); 
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 3, 2020, 7:05pm UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/13 "2020-12-03T19:05:29Z")

</div>

> [@juju](#):
>
> I feel like switching from Processing to P5 is just like learning another language … it’s all over again…

Same for me. I’ve fiddled around with Processing.java for some years now, but only recently with P5.js  
Although as a library the functions and structure seem similar, they are as language completely different. My posted answer was clearly wrong and I deleted it. But still, as an exercise, I’m trying to do it in html and css.  
In this code, the text is fixed, but I would like to link it the same way to an image.  
Any idea?

https://editor.p5js.org/noelpil/sketches/L4urVPrxt

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 4, 2020, 10:22am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887/14 "2020-12-04T10:22:15Z")

</div>

> [@noel](#):
>
> Any idea?

That was actually easy. I fixed the code above.