# p5JS server side render - using node-canvas

**URL:** <https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126>\
**Category:** Coding Questions\
**Created:** [April 5, 2021, 2:06am UTC](https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126 "2021-04-05T02:06:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![DCsan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dcsan/32/12710_2.png) [@DCsan](https://discourse.processing.org/u/DCsan)\
**Post date:** [April 5, 2021, 2:06am UTC](https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126/1 "2021-04-05T02:06:16Z")

</div>

I’d like to render images from a P5 script, for preview thumbnails. Has someone got advice on that?  
The node-canvas library would seem to be a good fit for this, but not sure how p5 deals with things like the event loop - calling the `draw()` and `setup()` is a bit more than just a single call to canvas render.

Does anyone have an example?

I saw this

> [@NodeJS with Fastify but want to make an canvas (p5js server-side)](https://discourse.processing.org/t/nodejs-with-fastify-but-want-to-make-an-canvas-p5js-server-side/24317/12):
>
> Loading in JSDOM: const virtualConsole = new VirtualConsole(), dom = new JSDOM( ` \<head\> \<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"\>\</script\> \<script\>${readFileSync("util/sketch.js")};\</script\> \</head\> \<body\> \<div\>foo\</div\> \</body\>`, { virtualConsole, runScripts: "dangerously", resources: "usable", pretendToBeVisual: true } );…

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 5, 2021, 7:24am UTC](https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126/2 "2021-04-05T07:24:07Z")

</div>

Hi! Welcome to the forum!

Can you be a bit more specific about what you’re trying to do? Are you trying to generate a static image? A gif?

Although I haven’t tried, a quick search shows [this npm package](https://github.com/andithemudkip/p5-node) - would this work for you, and if not, what would be an issue?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 5, 2021, 7:40am UTC](https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126/3 "2021-04-05T07:40:18Z")

</div>

just tried the package, it seems to work fine (at least for saving a static image) but surprised that the dependencies add up to 100MB - still it’s an impressive work.

---

<div class="post-metadata">

**Author:** ![DCsan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dcsan/32/12710_2.png) [@DCsan](https://discourse.processing.org/u/DCsan)\
**Post date:** [April 5, 2021, 7:31pm UTC](https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126/4 "2021-04-05T19:31:12Z")

</div>

thanks, yes I did end up using that. It loads in all of JSDOM which is a whole headless browser server side hence the huge deps. I was really looking for a more lean and mean solution just using node-canvas, which is a drawing surface.  
But P5 is not just code for drawing, with the render loop and other elements it seems to expect to have it’s own little mini-runtime to run in. I guess I can call `draw()` and `setup()` imperatively and get what i want… maybe?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 6, 2021, 7:53am UTC](https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126/5 "2021-04-06T07:53:09Z")

</div>

Well, again, you need to specify what you want 🙂

I’m not sure if you can modify the package or inject code to the sketch to pause draw (you can always `noLoop` to do so). But I don’t know your exact use case so I cannot suggest anything - for example, do you have a sketch to run only the draw loop once? Or do you want the loop for specific times? Do you have multiple sketches?