Implementation of Graphics Using JSPDF

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 co-ordinates (x1,y1) and ending co-ordinates (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.

Next Recommended Readings