Showing my P5 sketch with a projector

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 :smile:

1 Like

Hello @Omri,

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


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

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


/* 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;




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. Happily, it works in that context as well. :smile: 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.

1 Like

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.


1 Like

Thanks! :slight_smile:

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

1 Like