# NodeJS with Fastify but want to make an canvas (p5js server-side)

**URL:** <https://discourse.processing.org/t/nodejs-with-fastify-but-want-to-make-an-canvas-p5js-server-side/24317>\
**Category:** Libraries\
**Created:** [October 3, 2020, 10:45pm UTC](https://discourse.processing.org/t/nodejs-with-fastify-but-want-to-make-an-canvas-p5js-server-side/24317 "2020-10-03T22:45:02Z")\
**Posts on this page:** 1\
**Showing post:** 12

<div class="post-metadata">

**Author:** ![Bas950](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bas950/32/10749_2.png) [@Bas950](https://discourse.processing.org/u/Bas950)\
**Post date:** [November 20, 2020, 11:35pm UTC](https://discourse.processing.org/t/nodejs-with-fastify-but-want-to-make-an-canvas-p5js-server-side/24317/12 "2020-11-20T23:35:49Z")

</div>

Loading in JSDOM:

```auto
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
        }
      );
    virtualConsole.sendTo(console);

```

Then just do the p5js stuff in the sketch file  
And to send the data back I send back each frame as png  
and sending it back via JSDOM virtual console.

```auto
console.info(c.canvas.toDataURL("image/png"))

```

---

_[View the full topic](https://discourse.processing.org/t/nodejs-with-fastify-but-want-to-make-an-canvas-p5js-server-side/24317)._