# Showing my P5 sketch with a projector

**URL:** https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954
**Category:** Project Guidance
**Created:** [February 17, 2023, 2:06pm UTC](https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954 "2023-02-17T14:06:30Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)
#### Post date: [February 17, 2023, 2:06pm UTC](https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954/1 "2023-02-17T14:06:30Z")

</div>

Hey, I have a p5 project that is in a square format (800X800)  
I want to project it on a wall. How can I do that that it will be only shown the sketch? (without my browser tool Bar or something)  
Thanks 😄

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [February 19, 2023, 1:14am UTC](https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954/2 "2023-02-19T01:14:46Z")

</div>

Hello @Omri,

I was able to center the sketch on the page with CSS:

sketch.js:

```auto
function setup() {
  var cnv = createCanvas(800, 800);
  background(255, 0, 200);
}

function keyPressed() {
    let fs = fullscreen();
    fullscreen(!fs);
}

```

style.css:

```auto
/* style.css */

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;

  /* This centers our sketch horizontally. */
  justify-content: center;

  /* This centers our sketch vertically. */
  align-items: center;
}

```

References:  
[https://p5js.org/reference/#/p5/fullscreen](https://p5js.org/reference/#/p5/fullscreen)  
[https://github.com/processing/p5.js/wiki/Positioning-your-canvas](https://github.com/processing/p5.js/wiki/Positioning-your-canvas)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/d/1dfbafe76e095c154895ef06dde14020afeff457.png)

`:)`

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [February 25, 2023, 12:50am UTC](https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954/4 "2023-02-25T00:50:13Z")

</div>

Thanks, @glv. This, of course, works really well for a page that contains a sketch as its sole content.

I must admit having been skeptical regarding whether it would also work similarly in the [p5.js Web Editor](https://editor.p5js.org/). Happily, it works in that context as well. 😄 It must be that I don’t fully understand specifically what in your example code enables it to push all the other content on the page aside, including the editing pane and the console, in order to display only the sketch itself.

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [February 25, 2023, 11:54am UTC](https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954/5 "2023-02-25T11:54:59Z")

</div>

> [@javagar](#):
>
> It must be that I don’t fully understand specifically what in your example code enables it to push all the other content on the page aside, including the editing pane and the console, in order to display only the sketch itself.

My example code is from the wiki page and I added _fullscreen()_.  
This combination worked at my end.

There are additional links in the wiki page to peruse.

`:)`

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [February 26, 2023, 1:28pm UTC](https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954/6 "2023-02-26T13:28:59Z")

</div>

> [@glv](#):
>
> My example code is from the wiki page and I added _fullscreen()_.

Thanks! 🙂

There’s lots of great material there, including your contribution.
