# Help with hiding and showing the canvas

**URL:** <https://discourse.processing.org/t/help-with-hiding-and-showing-the-canvas/26795>\
**Category:** Coding Questions\
**Created:** [January 5, 2021, 3:09pm UTC](https://discourse.processing.org/t/help-with-hiding-and-showing-the-canvas/26795 "2021-01-05T15:09:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michna](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@Michna](https://discourse.processing.org/u/Michna)\
**Post date:** [January 5, 2021, 3:09pm UTC](https://discourse.processing.org/t/help-with-hiding-and-showing-the-canvas/26795/1 "2021-01-05T15:09:40Z")

</div>

Hello everyone,

i started to programm an online gallery of photographs where more pictures are shown on one canvas. I would like to move to second page or create second canvas (then third and so on) with another photographs through the function mousePressed, but always see the images from the first layer with the canvas in the background. Can someone help me?

Thank you!

Michaela

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 5, 2021, 3:27pm UTC](https://discourse.processing.org/t/help-with-hiding-and-showing-the-canvas/26795/2 "2021-01-05T15:27:56Z")

</div>

Create a way to store image’s “stage/page/screen/turn/…” or basically a value which tells you what page the picture is supposed to be placed.  
After you do that just go through

```auto
PImage array[] = new PImage[10];
//replace with code for loading images
//
void draw() {
   for(int i = 0; i < array.length; i++) {
      if(image1page == cPage) {
          image(array[i], x, y)      
       }
   }
}

```

or create a function (less useful for galleries with hundreds of pages:

```auto

void draw() {
    if(cPage == 1) {
         page1;
    } else if(cPage == 2) {
         ...
    }
}
void page1() {
    background(0);
    image(array[0],x,y);
    image(array[1],x2,y2);
   ...
}
void page2() {
    
} 

```

this is a processing example. It should work the same way in p5.js but with different functions