Saving & Sharing

Saving a still image

saveCanvas() exports the current canvas as a PNG or JPG:

function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('my-sketch', 'png');   // filename, format
  }
}

The file downloads to your browser’s default downloads folder. You can also call it without arguments — p5.js will use a timestamp as the filename.

Saving a specific frame

If you’re generating a piece with noLoop() and want to capture it, call saveCanvas() at the end of draw():

function setup() {
  createCanvas(1200, 1200);   // high-res for print
  noLoop();
}

function draw() {
  // ... all your drawing code ...
  saveCanvas('artwork-' + Date.now(), 'png');
}

Tip: Use a larger canvas for export than for preview. Work on a 600×600 preview, then change it to 2400×2400 when exporting for print.

Saving a PDF

The p5.js PDF library lets you save resolution-independent vector output:

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/addons/p5.dom.min.js"></script>

For proper PDF export, the p5.js PDF library wraps jsPDF. Alternatively, export a large PNG and bring it into Illustrator or Inkscape for vector tracing.

Recording a GIF or video

Option 1 — Browser screen recorder

The simplest approach: use your OS’s built-in screen recorder or a browser extension like ScreenToGif (Windows) or Kap (macOS).

Option 2 — CCapture.js

For programmatic recording, CCapture.js hooks into the draw loop and captures every frame. It can export WebM, GIF, or PNG sequences.

<script src="https://cdn.jsdelivr.net/npm/ccapture.js"></script>

let capturer;
let recording = false;

function setup() {
  createCanvas(600, 400);
  capturer = new CCapture({ format: 'webm', framerate: 60 });
}

function draw() {
  // your sketch code...

  if (recording) capturer.capture(document.querySelector('canvas'));
}

function keyPressed() {
  if (key === 'r') {
    recording = !recording;
    if (recording) capturer.start();
    else           { capturer.stop(); capturer.save(); }
  }
}

Sharing via the p5.js web editor

The easiest way to share a sketch publicly:

1. Go to editor.p5js.org and sign in
2. Paste your code (or write it there)
3. Click File → Share
4. Copy the Present URL — this shows the sketch fullscreen without the editor interface

Anyone with the link can run your sketch in their browser.

Embedding in a website

To embed a p5.js sketch in your own website, wrap it in an instance mode sketch to avoid polluting the global namespace:

<div id="sketch-container"></div>

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.min.js"></script>
<script>
const sketch = (p) => {
  p.setup = function () {
    let canvas = p.createCanvas(600, 400);
    canvas.parent('sketch-container');
  };

  p.draw = function () {
    p.background(20);
    p.fill(100, 200, 255);
    p.circle(p.mouseX, p.mouseY, 40);
  };
};

new p5(sketch);
</script>

In instance mode, all p5.js functions are prefixed with p.. This keeps the sketch self-contained on the page.

Hosting on GitHub Pages

GitHub Pages is free and perfect for hosting p5.js sketches:

1. Create a repository on GitHub
2. Put your index.html (with the p5 sketch) in the root
3. Go to Settings → Pages → set the source to main branch / root
4. Your sketch is live at https://yourusername.github.io/reponame/

For multiple sketches, give each one its own folder with its own index.html.

OpenProcessing and the p5.js editor

Two community-focused platforms for sharing creative coding work:

• openprocessing.org — community of thousands of Processing and p5.js sketches; fork and remix others’ work
• editor.p5js.org — official editor with profiles and public sketches

Key takeaways

• saveCanvas('name', 'png') exports the canvas as an image file
• Use a large canvas size (2000px+) for print-quality output
• CCapture.js enables programmatic video/GIF recording from the draw loop
• The p5.js web editor’s Present URL is the fastest sharing option
• Instance mode (const sketch = (p) => { ... }) lets you safely embed p5 in any webpage
• GitHub Pages is free hosting for static p5.js sketches