# Easiest way to save a canvas for access on the next webpage?

**URL:** <https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985>\
**Category:** p5.js\
**Created:** [May 9, 2021, 12:28pm UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985 "2021-05-09T12:28:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Post date:** [May 9, 2021, 12:28pm UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985/1 "2021-05-09T12:28:02Z")

</div>

If i needed to save the p5 canvas as an image file to somewhere on the webserver, and then have the next page pick it up and display it as a standard html image? How would I do this? I’m assuming i need to use PHP or something to save the variable, but how would i get the p5 image exported to the server in the first place? While also keeping the saved file name/location as a variable that can be accessed from a PHP script or the next HTML page etc.

---

<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:** [May 9, 2021, 6:54pm UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985/2 "2021-05-09T18:54:51Z")

</div>

I believe there is no “easiest” way for this - it depends on your skill set and your needs. Usually I go for node.js because I can use javascript - and there are some libraries for uploading files easily

> **[multer](https://www.npmjs.com/package/multer)**
>
> Middleware for handling \`multipart/form-data\`.

---

<div class="post-metadata">

**Author:** ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Post date:** [May 9, 2021, 8:08pm UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985/3 "2021-05-09T20:08:19Z")

</div>

But how would i save the p5 canvas in the first place? and then wouldnt PHP be easier to work with to get the file there? Im not sure how it works with p5.

---

<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:** [May 9, 2021, 8:32pm UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985/4 "2021-05-09T20:32:19Z")

</div>

hmm I hope I made my point clear that there is no one “easiest” way to do it. PHP was the “mainstream” but the downside is (if I understand correctly) you need to set up a server globally. node.js may be quicker as you can run it standalone (still you need to install node.js/npm globally) and set up apache or nginx for reverse proxy only when you need to expose to the internet. You can use services such as repl.it or [glitch.com](http://glitch.com) for quick development online, and this is why I usually recommend node.js. But again, if you already have experience in PHP, why not use PHP?

For retrieving canvas data, you can create a “blob” with this function: [HTMLCanvasElement.toBlob() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)  
and then send it to the server with POST: [Using Fetch - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)  
or websocket etc. depending on how the server is listening. I found websocket is easier because basically you can send whatever you want. You can search for examples on glitch - for example: [Glitch](https://glitch.com/~p5-shared-canvas-websocket)

---

<div class="post-metadata">

**Author:** ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Post date:** [May 9, 2021, 8:55pm UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985/5 "2021-05-09T20:55:19Z")

</div>

Thanks, ill look into that and do some testing. The main reason for me thinking about using PHP is that the website is already going to have php to do things, for instance file upload to server (user can upload file to location on server) (i used html5 forms and php).

---

<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:** [May 9, 2021, 10:24pm UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985/6 "2021-05-09T22:24:43Z")

</div>

yes then you should have asked that way… and I am not against PHP at all. I guess in that case you should check out how to send the data by POST and not with websocket. After getting a blob, you need something like this, but it will be definitely outside what p5.js offers

> <https://stackoverflow.com/questions/36067767/how-do-i-upload-a-file-with-the-js-fetch-api>

---

<div class="post-metadata">

**Author:** ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Post date:** [May 9, 2021, 11:41pm UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985/7 "2021-05-09T23:41:44Z")

</div>

Ahh yes sorry my bad for not making it clear. Thanks now I know what to research into I can learn about PHP “blob” and should be able to make it after a bit of learning…

---

<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:** [May 10, 2021, 7:55am UTC](https://discourse.processing.org/t/easiest-way-to-save-a-canvas-for-access-on-the-next-webpage/29985/8 "2021-05-10T07:55:48Z")

</div>

by the way blob is like a “virtual” file - if you can handle image file upload on PHP, uploading blob should work the same way.