# Draw elements in foreground vs background

**URL:** <https://discourse.processing.org/t/draw-elements-in-foreground-vs-background/17197>\
**Category:** Libraries\
**Created:** [January 20, 2020, 7:27am UTC](https://discourse.processing.org/t/draw-elements-in-foreground-vs-background/17197 "2020-01-20T07:27:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![criacuervos](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@criacuervos](https://discourse.processing.org/u/criacuervos)\
**Post date:** [January 20, 2020, 7:27am UTC](https://discourse.processing.org/t/draw-elements-in-foreground-vs-background/17197/1 "2020-01-20T07:27:53Z")

</div>

Hi all,

I’m working with p5js on a shared drawing canvas where 2 people can collaborate on a drawing. I want to draw stars on the canvas that cannot be drawn over. I’m having trouble figuring out if this can be done. I cannot redraw the background because that will clear the things that people have drawn. I don’t want to save what people have drawn in an array as that causes a lot of lag.

I just was wondering if there is a a quality I can give to the star objects that will make them not be able to be drawn over, so they at least appear in the foreground… Any suggestions are appreciated!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 8:39am UTC](https://discourse.processing.org/t/draw-elements-in-foreground-vs-background/17197/2 "2020-01-20T08:39:31Z")

</div>

When you draw pixel by pixel you could check if the color already present in this pixel is the color of a star. If so don’t draw the new pixel.

You could also have the stars drawn once on an additional PGraphics and perform the pg.get(mouseX,mouseY); check there. (Then the user can also use the stars color but it can still be changed later.)

---

<div class="post-metadata">

**Author:** ![Nathan](https://avatars.discourse-cdn.com/v4/letter/n/c5a1d2/32.png) [@Nathan](https://discourse.processing.org/u/Nathan)\
**Post date:** [January 20, 2020, 5:40pm UTC](https://discourse.processing.org/t/draw-elements-in-foreground-vs-background/17197/3 "2020-01-20T17:40:48Z")

</div>

I’m not a hundred percent sure what you’re after, but as @Chrisir said you _can_ use another PGraphics object as a secondary screen/buffer to draw too. It’s the same as drawing to the default one except you have to explicitly mention the instance and call **beginDraw()** and **endDraw()** on it yourself.

E.g.

```auto
PGraphics g;

void setup() {
    g = createGraphics(800, 600);
}

void draw() {
    g.beginDraw();
    
    // ... do some drawing here ...
    
    g.endDraw();
}

```

Then you can just draw the whole thing over the main screen before or after, or use it as some kind of mask.

If you just want a static background or foreground just store the needed data in static variables and always draw it before or after everything else.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 5:44pm UTC](https://discourse.processing.org/t/draw-elements-in-foreground-vs-background/17197/4 "2020-01-20T17:44:02Z")

</div>

Ah.

I was just referring to pg to use it as an invisible pg to check the mouse against its colors.

But now that you mentioned it: we could also make a transparent pg with stars (not transparent) and place it as a layer on top of the screen

---

<div class="post-metadata">

**Author:** ![criacuervos](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@criacuervos](https://discourse.processing.org/u/criacuervos)\
**Post date:** [January 20, 2020, 11:08pm UTC](https://discourse.processing.org/t/draw-elements-in-foreground-vs-background/17197/6 "2020-01-20T23:08:39Z")

</div>

hmm, when I try writing g.beginDraw(): I get an error:  
`sketch.js:67 Uncaught TypeError: pg.beginDraw is not a function`

is there a library i need to include?

upon some googling I see that this is used in processing, but I forgot to mention Im using p5js

---

<div class="post-metadata">

**Author:** ![Nathan](https://avatars.discourse-cdn.com/v4/letter/n/c5a1d2/32.png) [@Nathan](https://discourse.processing.org/u/Nathan)\
**Post date:** [January 21, 2020, 12:19am UTC](https://discourse.processing.org/t/draw-elements-in-foreground-vs-background/17197/7 "2020-01-21T00:19:18Z")

</div>

[https://p5js.org/reference/#group-Rendering](https://p5js.org/reference/#group-Rendering)

Ah. See pages linked from the section on the above page.

You still need the createGraphics bit, but I guess there’s no equivalent set of enclosing calls. Processing is largely an API/Library that wraps core functionality of Java, or in this case javascript.

Don’t forget to call the functions appropriately though.

`background(0);`

is different than:

`g.background(0);`

The former affects the main drawing area, the Canvas, whereas the latter affects g, which is a kind of offscreem drawing buffer.