# Newb Question: Saving to PDF

**URL:** <https://discourse.processing.org/t/newb-question-saving-to-pdf/39123>\
**Category:** Libraries\
**Created:** [October 6, 2022, 8:36pm UTC](https://discourse.processing.org/t/newb-question-saving-to-pdf/39123 "2022-10-06T20:36:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tatcoddes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tatcoddes/32/17077_2.png) [@Tatcoddes](https://discourse.processing.org/u/Tatcoddes)\
**Post date:** [October 6, 2022, 8:36pm UTC](https://discourse.processing.org/t/newb-question-saving-to-pdf/39123/1 "2022-10-06T20:36:41Z")

</div>

I am trying to save my sketches to PDF. The most commonly mentioned way of doing this is to use this:

[https://github.com/zenozeng/p5.js-pdf](https://github.com/zenozeng/p5.js-pdf)

but I am testing it with one of his simple example codes and it just loads a blank page. I am new to PDE so I am concerned I did not install the library correctly… I just downloaded from GitHub and then copied the folder into the Libraries folder that processing made in Documents.

Here is a screenshot of what was in the folder - was I supposed to do something else here to install it?

Thanks

 ![Screenshot 2022-10-06 at 22.32.25](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/b/db994ebec50dc206db511f7af1d983178176cbd7.jpeg)

EDIT: Here is the code I am using for testing.

```auto
function setup() {
    createCanvas(600, 200, P2D);
    pdf = createPDF();
    pdf.beginRecord();
}

function draw() {
    background(255);
    fill('#ED225D');
    textSize(100);
    textAlign(CENTER);
    text(frameCount, width * 0.5, height * 0.5);
    if (frameCount == 10) {
        noLoop();
        pdf.save();
    }
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [October 6, 2022, 9:07pm UTC](https://discourse.processing.org/t/newb-question-saving-to-pdf/39123/2 "2022-10-06T21:07:09Z")

</div>

Hi

Look at this

> [@Saving canvas in PDF](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/10):
>
> Here is a minimal example that is not working: var sign = true; function setup() { var myCanvas = createCanvas(400, 400, SVG); myCanvas.parent("myContainer"); pdf = createPDF(); pdf.beginRecord(); } function draw() { fill(0, 0, 255); ellipse(width/2, height/2, width/2, height/2); if (sign) { pdf.save( { filename: "ethercoil.pdf" } ); sign = false; } } \<html\> \<head\> \<meta charset="UTF-8"\> \<!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO…

[http://zenozeng.github.io/p5.js-pdf/examples/#vector](http://zenozeng.github.io/p5.js-pdf/examples/#vector)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 6, 2022, 10:08pm UTC](https://discourse.processing.org/t/newb-question-saving-to-pdf/39123/3 "2022-10-06T22:08:22Z")

</div>

Your source code works on my system (MacOS) using a Chrome browser with p5.js WebEditor. The following are the steps that I used.

1. Download GitHub repository to my desktop using the URL in your post.
2. Open p5.js WebEditor in Chrome browser.
3. Create a new file in the project entitled ‘p5.pdf.js’ . File system should look like the image below.
4. Copy/paste the contents of the p5.pdf.js file that you downloaded to your desktop (inside folder p5.js-pdf-master) to this newly created file.
5. Inside of the index.html file of your project add this line of code to allow your project to use the file that you just created:

```auto
<script src="p5.pdf.js"></script> 

```

I placed this line just below the other script code for “sketch.js”.  
6. Run the code that you posted and create a pdf file. I sent the output to my desktop instead of the printer; the output is also shown below.

![files](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/4/84f5f813178dab3e730595e006db885e489235e0.png)

 ![output](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/f/0ff9320fc02c7281f94db23d429ee4fd3f827bd5.png)

---

<div class="post-metadata">

**Author:** ![Tatcoddes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tatcoddes/32/17077_2.png) [@Tatcoddes](https://discourse.processing.org/u/Tatcoddes)\
**Post date:** [October 7, 2022, 7:28pm UTC](https://discourse.processing.org/t/newb-question-saving-to-pdf/39123/4 "2022-10-07T19:28:29Z")

</div>

This is amazing thanks so much - it works. I was even able to use your steps with another script to then get it to SVG to save it as a Vector PDF, which is what I set out to do.

By any chance do you know how I would go about getting the same thing in my PDE as I now have in the web browser? You are saying it works on yours? If not I can use a workaround of doing my drawing in PDE and then when its ready to save to PDF.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 8, 2022, 5:04am UTC](https://discourse.processing.org/t/newb-question-saving-to-pdf/39123/5 "2022-10-08T05:04:43Z")

</div>

The following reference describes getting a .pdf with Processing IDE:  
[https://processing.org/reference/libraries/pdf/index.html](https://processing.org/reference/libraries/pdf/index.html)

---

<div class="post-metadata">

**Author:** ![Tatcoddes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tatcoddes/32/17077_2.png) [@Tatcoddes](https://discourse.processing.org/u/Tatcoddes)\
**Post date:** [October 8, 2022, 9:21am UTC](https://discourse.processing.org/t/newb-question-saving-to-pdf/39123/6 "2022-10-08T09:21:46Z")

</div>

Figured it out with the Zenozeng method. I know its dumb but I couldn’t figure out how to edit the HTML of my sketches for the PDE. I was trying to open the HTML file from finder and it was coming up blank in textedit. I now see it in the tab next to the sketch I have open in PDE, and was able to add the line as you said. Complete rookie error. Thanks so much.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 8, 2022, 6:00pm UTC](https://discourse.processing.org/t/newb-question-saving-to-pdf/39123/7 "2022-10-08T18:00:05Z")

</div>

Thanks for the feedback. I’ve always used WebEditor in a Chrome browser on Mac for p5.js. Now I also know how to use Processing IDE in p5.js mode with my system’s default browser, Safari.