# How to take screenshots of the canvas?

**URL:** <https://discourse.processing.org/t/how-to-take-screenshots-of-the-canvas/6824>\
**Category:** Libraries\
**Created:** [December 22, 2018, 3:27pm UTC](https://discourse.processing.org/t/how-to-take-screenshots-of-the-canvas/6824 "2018-12-22T15:27:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jnsjknn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jnsjknn/32/2919_2.png) [@jnsjknn](https://discourse.processing.org/u/jnsjknn)\
**Post date:** [December 22, 2018, 3:27pm UTC](https://discourse.processing.org/t/how-to-take-screenshots-of-the-canvas/6824/1 "2018-12-22T15:27:39Z")

</div>

Is there a way in the p5.js web editor to take and save several screenshots of the canvas automatically? For example every x frames or according to some other programmed rule?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 22, 2018, 3:53pm UTC](https://discourse.processing.org/t/how-to-take-screenshots-of-the-canvas/6824/2 "2018-12-22T15:53:41Z")

</div>

> [@How to save your p5.js sketch as a GIF using CCapture.js](https://discourse.processing.org/t/how-to-save-your-p5-js-sketch-as-a-gif-using-ccapture-js/1264/2):
>
> I’ve managed to host a CCapture demo sketch online: star_struck[https://ThimbleProjects.org/gotoloop/509340](https://ThimbleProjects.org/gotoloop/509340)[https://ThimbleProjects.org/gotoloop/509340/sketch.js](https://ThimbleProjects.org/gotoloop/509340/sketch.js) Important note: the CCapture library demands the file “gif.worker.js” in order to save all of the capture() canvas frames as a “.gif” file! You can grab 1 at the link below: robot[http://cdn.JsDelivr.net/npm/gif.js/dist/gif.worker.js](http://cdn.JsDelivr.net/npm/gif.js/dist/gif.worker.js) “index.html”: \<!DOCTYPE html\> \<meta charset=utf-8\> \<meta name=viewport content=width=device-wi…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 6, 2019, 7:21pm UTC](https://discourse.processing.org/t/how-to-take-screenshots-of-the-canvas/6824/3 "2019-01-06T19:21:57Z")

</div>

From the p5.js reference, you may also be interested in `save()`, `saveFrames()`, and `saveCanvas()`:

- [https://p5js.org/reference/#/p5/save](https://p5js.org/reference/#/p5/save)
- [https://p5js.org/reference/#/p5/saveFrames](https://p5js.org/reference/#/p5/saveFrames)
- [https://p5js.org/reference/#/p5/saveCanvas](https://p5js.org/reference/#/p5/saveCanvas)