Saving canvas in PDF

p5.js Libraries
1

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.

2

First link on google with p5js pdf:

2 Likes
3

Look at :

4

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

5

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
feature request: PDF export · Issue #373 · processing/p5.js · GitHub

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

1 Like
6

All right!

My problem is that the code:

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.

7

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

1 Like
8 
<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>
9

Try this code that you can find here.

Kf

<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>
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) -->
  <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:


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.

Thanks for help.