Introduction

JSPDF is an open-source library for generating PDF documents using nothing but JavaScript.
There are certain predefined functions in JSPDF for implementing graphics, like drawing a line, a circle or triangle and so on.

How to draw a Line?

  1. doc.line(x1, y1,x2,y2);
    It will draw a line with starting coordinates (x1,y1) and ending coordinates (x2,y2).
  2. doc.setLineWidth(n);
    It is used to get a line of width “n”.
Code Example
  1. function demoLine() {
  2. var doc = new jsPDF();
  3. doc.line(15, 15, 50, 15); // horizontal line
  4. doc.setLineWidth(0.5);
  5. doc.line(15, 20, 50, 20);
  6. doc.setLineWidth(1);
  7. doc.line(15, 25, 50, 25);
  8. doc.setLineWidth(1.5);
  9. doc.line(15, 30, 50, 30);
  10. doc.setDrawColor(255, 0, 0); // draw red lines
  11. doc.setLineWidth(0.1);
  12. doc.line(90, 15, 90, 50); // vertical line
  13. doc.setLineWidth(0.5);
  14. doc.line(95, 15, 95, 50);
  15. doc.setLineWidth(1);
  16. doc.line(105, 15, 100, 50);
  17. doc.setLineWidth(1.5);
  18. doc.line(110, 15, 105, 50);
  19. doc.save('graphics.pdf');
  20. }
Output

How to draw a Circle and Ellipse?

  1. doc.circle(x, y, r,style):
    “x” is the coordinate of the left edge.
    “y” is the coordinate of the top edge.
    “r” is the radius of the circle.
    “style” is a string specifying if stroke, fill or both are to be applied.
  2. doc.ellipse(x, y, rx, ry, style):
    “x”, “y” and “style” are the same as for a circle.
    “rx” is the radius along the x-axis.
    “ry” is the radius along the y-axis.
Code Example
  1. function demoCircleEllipse() {
  2. var doc = new jsPDF();
  3. doc.ellipse(35, 35, 15, 5); //empty ellipse
  4. doc.setFillColor(0, 0, 255); //select color to fill the ellipse
  5. doc.ellipse(90, 35, 10, 5, 'F'); //filled ellipse
  6. doc.setLineWidth(1);
  7. doc.setDrawColor(0);
  8. doc.setFillColor(255, 0, 0);
  9. doc.circle(135, 35, 5, 'FD'); //filled red circle with black border
  10. doc.save('test.pdf');
  11. }
Output

How to draw a triangle?

  1. doc.triangle(x1, y1, x2, y2, x3, y3, ‘style’);
    It will draw a triangle with the three points (x1,y1), (x2,y2) and (x3,y3).
Code Example
  1. function demoTriagle() {
  2. var doc = new jsPDF();
  3. doc.triangle(70, 110, 70, 130, 90, 120, 'FD');
  4. doc.setLineWidth(1);
  5. doc.setDrawColor(255, 0, 0);
  6. doc.setFillColor(0, 0, 255);
  7. doc.triangle(110, 110, 120, 110, 130, 140, 'FD');
  8. doc.save('Test.pdf');
  9. }
Output

How to draw a Rectangle?

  1. doc.rectangle(x, y, w, h, ‘style’);
    It will draw a rectangle with starting co-ordinate (x,y), width ”w” and height “h”.
Code example
  1. function demoRectangle() {
  2. var doc = new jsPDF();
  3. doc.rect(20, 20, 10, 10); // empty square
  4. doc.rect(50, 20, 10, 10, 'F'); // filled square
  5. doc.setDrawColor(255, 0, 0);
  6. doc.rect(80, 20, 10, 10); // empty red square
  7. doc.setDrawColor(255, 0, 0);
  8. doc.rect(110, 20, 10, 10, 'FD'); // filled square with red borders
  9. doc.setDrawColor(0);
  10. doc.setFillColor(255, 0, 0);
  11. doc.rect(140, 20, 10, 10, 'F'); // filled red square
  12. doc.setDrawColor(0);
  13. doc.setFillColor(255, 0, 0);
  14. doc.rect(160, 20, 10, 10, 'FD'); // filled red square with black borders
  15. doc.setDrawColor(0);
  16. doc.setFillColor(255, 255, 255);
  17. doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); // Black sqaure with rounded corners
  18. doc.save('graphics.pdf');
  19. }
Output
Source Code
This article helps in plotting various graphics designs with the given specification from HTML TO PDF using JSPDF.
HTML Output
And using embedded source code, the fully dynamic graphics can be implemented in the PDF from HTML. The code to implement it, is:
  1. function demoLine()
  2. {
  3. var doc = new jsPDF();
  4. doc.setLineWidth(1);
  5. doc.setDrawColor(255, 0, 0); // draw red lines
  6. doc.line(parseInt(document.getElementById("lx1").value), parseInt(document.getElementById("ly1").value), parseInt(document.ge tElementById("lx2").value), parseInt(document.getElementById("ly2").value));
  7. doc.save('graphics.pdf');
  8. }
  9. function demoEllipse() {
  10. var doc = new jsPDF();
  11. doc.setLineWidth(1);
  12. doc.setDrawColor(0);
  13. doc.setFillColor(255, 0, 0);
  14. doc.ellipse(parseInt(document.getElementById("cx").value), parseInt(document.getElementById("cy").value), parseInt(document.g etElementById("cr").value), parseInt(document.getElementById("cr1").value), 'F'); doc.save('test.pdf');
  15. }
  16. function demoCircle() {
  17. var doc = new jsPDF();
  18. doc.setLineWidth(1);
  19. doc.setDrawColor(0);
  20. doc.setFillColor(255, 0, 0);
  21. doc.circle(parseInt(document.getElementById("cx").value), parseInt(document.getElementById("cy").value), parseInt(document.ge tElementById("cr").value), 'FD');
  22. doc.save('graphics.pdf');
  23. }
  24. function demoTriangle() {
  25. var doc = new jsPDF();
  26. doc.setLineWidth(1);
  27. doc.setDrawColor(255, 0, 0);
  28. doc.setFillColor(0, 0, 255);
  29. doc.triangle(parseInt(document.getElementById("tx1").value), parseInt(document.getElementById("ty1").value), parseInt(documen t.getElementById("tx2").value), parseInt(document.getElementById("ty2").value), parseInt(document.getElementById("tx3").value), parseInt(document.getElementById("ty3").value), 'FD');
  30. doc.save('Test.pdf');
  31. }
  32. function demoRectangle() {
  33. var doc = new jsPDF();
  34. if (document.getElementById('radio1').checked == true) {
  35. doc.rect(parseInt(document.getElementById("rx").value), parseInt(document.getElementById("ry").value), parseInt(document. getElementById("rl").value), parseInt(document.getElementById("rb").value));
  36. }
  37. if (document.getElementById('radio2').checked == true) {
  38. doc.roundedRect(parseInt(document.getElementById("rx").value), parseInt(document.getElementById("ry").value), parseInt(do cument.getElementById("rl").value), parseInt(document.getElementById("rb").value), 3, 3); //rectangle with rounded corners
  39. }
  40. doc.save('graphics.pdf');
  41. }

Conclusion

I think it would help a lot to all those people who really want to try something new in their programming techniques.
Also, there are other ways to create a PDF from HTML like mpdf and so on.