# Saving canvas in PDF

**URL:** <https://discourse.processing.org/t/saving-canvas-in-pdf/3025>\
**Category:** Libraries\
**Created:** [August 27, 2018, 4:12pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025 "2018-08-27T16:12:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 27, 2018, 4:12pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/1 "2018-08-27T16:12:06Z")

</div>

I need to save a vector graphics version of the canvas in p5.js. Is there something like library processing.pdf.\* in p5.js? Hope so.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 27, 2018, 4:34pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/2 "2018-08-27T16:34:32Z")

</div>

First link on google with `p5js pdf`:

> **[zenozeng/p5.js-pdf](https://github.com/zenozeng/p5.js-pdf)**
>
> A simple PDF export module for p5.js. Contribute to zenozeng/p5.js-pdf development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [August 27, 2018, 4:34pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/3 "2018-08-27T16:34:37Z")

</div>

Look at :

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

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 27, 2018, 5:24pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/4 "2018-08-27T17:24:03Z")

</div>

I know this library; it’s quite old and not really working well (at least if compared with Processing pdf library).

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 27, 2018, 5:55pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/5 "2018-08-27T17:55:55Z")

</div>

You are using an HTML5 Canvas in p5.js, so it is my understanding. If the pdf p5.js is not working for you, you are welcome to explore other alternatives:

> [html - Exporting Vector Graphics from HTML5 Canvas - Stack Overflow](https://stackoverflow.com/questions/9648878/exporting-vector-graphics-from-html5-canvas)  
> [feature request: PDF export · Issue #373 · processing/p5.js · GitHub](https://github.com/processing/p5.js/issues/373)

> [@HEX0x6C](#):
>
> I know this library; it’s quite old and not really working well

If you have tried this library and it is not working for you, the first thing you could do is describe what is not working. People could provide you alternatives based on p5.js resources, if there are any. This could potentially lead to opening a ticket in github as a feature request.

Kf

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 27, 2018, 7:32pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/6 "2018-08-27T19:32:25Z")

</div>

All right!

My problem is that the code:

```auto
var myCanvas = createCanvas(1000, 1000, SVG);
myCanvas.parent('myContainer');

```

gives the following **error** :  
`Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.`

I’m following these [guidelines](https://github.com/processing/p5.js/wiki/Beyond-the-canvas).

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 27, 2018, 8:14pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/7 "2018-08-27T20:14:57Z")

</div>

In your html code, did you define a line similar to this: `<div id='myContainer'></div>`? It would be great if you provide your html code.

Kf

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 27, 2018, 8:50pm UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/8 "2018-08-27T20:50:23Z")

</div>

```auto
<html>
<head>
  <meta charset="UTF-8">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/BigInteger.min.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/p5.pdf.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/p5.svg.js"></script>
  <script language="javascript" type="text/javascript" src="p5js-temp-EtherCoilPurchase4787146890359184796.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
  <title>EtherCoil</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  

</head>

<body>
<h1>EtherCoil</h1>
<br/>
<!-- hash -->
<p style = "text-align: center;" id="hash"></p>

<!-- coil -->
<div style = "text-align: center;" id="myContainer"></div>

 </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 28, 2018, 1:31am UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/9 "2018-08-28T01:31:50Z")

</div>

Try this code that you can find [here](http://p5js.sketchpad.cc/sp/pad/view/w105lv1K2q/latest).

Kf

```auto
<html><head>
  <meta charset="UTF-8">  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
   <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>-->   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
  
  <title>EtherCoil</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  
</head>
<body>

<!-- hash -->
<div style="text-align:center;">
<h1>EtherCoil</h1>
<p id="hash">EtherCoil</p>
</div>

<br/>

<!-- coil -->
<div style="text-align:center;" id="myContainer"></div>

<script>  
function setup(){
     var myCanvas = createCanvas(400, 400,SVG);
     myCanvas.parent('#myContainer');
     background(194);
     fill(200,25,25);
     ellipse(width/2,height/2,50,50);
}     
</script>

 </body></html>

```

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 28, 2018, 6:24am UTC](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/10 "2018-08-28T06:24:05Z")

</div>

Here is a _minimal_ example that is **not** working:

```auto
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;
  }
}

```

```auto

<html>
  <head>
  <meta charset="UTF-8">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/p5.pdf.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/p5.svg.js"></script>
  <script language="javascript" type="text/javascript" src="EtherCoilTest.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
  <title>EtherCoil</title>  

  </head>

  <body>
  <h1>EtherCoil</h1>

  <div style = "text-align: center;" id="myContainer"></div>

  </body>
</html>

```

Error is:

```auto

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at RendererSVG.p5.Element.parent (p5.js:10984)
    at setup (EtherCoilTest.js:5)
    at p5.<anonymous> (p5.js:9111)
    at p5.<anonymous> (p5.js:9041)
    at new p5 (p5.js:9323)
    at _globalInit (p5.js:5602)

```

I am using PDE in P5 mode. I adapted the code from [this](http://zenozeng.github.io/p5.js-pdf/examples/#vector).

Thanks for help.