Implementation of Graphics Using JSPDF

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

function demoLine() {
    var doc = new jsPDF();
    doc.line(15, 15, 50, 15); // horizontal line
    doc.setLineWidth(0.5);
    doc.line(15, 20, 50, 20);
    doc.setLineWidth(1);
    doc.line(15, 25, 50, 25);
    doc.setLineWidth(1.5);
    doc.line(15, 30, 50, 30);
    doc.setDrawColor(255, 0, 0); // draw red lines
    doc.setLineWidth(0.1);
    doc.line(90, 15, 90, 50); // vertical line
    doc.setLineWidth(0.5);
    doc.line(95, 15, 95, 50);
    doc.setLineWidth(1);
    doc.line(105, 15, 100, 50);
    doc.setLineWidth(1.5);
    doc.line(110, 15, 105, 50);
    doc.save('graphics.pdf');
}

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

function demoCircleEllipse() {
    var doc = new jsPDF();
    doc.ellipse(35, 35, 15, 5); //empty ellipse
    doc.setFillColor(0, 0, 255); //select color to fill the ellipse
    doc.ellipse(90, 35, 10, 5, 'F'); //filled ellipse
    doc.setLineWidth(1);
    doc.setDrawColor(0);
    doc.setFillColor(255, 0, 0);
    doc.circle(135, 35, 5, 'FD'); //filled red circle with black border
    doc.save('test.pdf');
}

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

function demoTriagle() {
    var doc = new jsPDF();
    doc.triangle(70, 110, 70, 130, 90, 120, 'FD');
    doc.setLineWidth(1);
    doc.setDrawColor(255, 0, 0);
    doc.setFillColor(0, 0, 255);
    doc.triangle(110, 110, 120, 110, 130, 140, 'FD');
    doc.save('Test.pdf');
}

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

function demoRectangle() {
    var doc = new jsPDF();
    doc.rect(20, 20, 10, 10); // empty square
    doc.rect(50, 20, 10, 10, 'F'); // filled square
    doc.setDrawColor(255, 0, 0);
    doc.rect(80, 20, 10, 10); // empty red square
    doc.setDrawColor(255, 0, 0);
    doc.rect(110, 20, 10, 10, 'FD'); // filled square with red borders
    doc.setDrawColor(0);
    doc.setFillColor(255, 0, 0);
    doc.rect(140, 20, 10, 10, 'F'); // filled red square
    doc.setDrawColor(0);
    doc.setFillColor(255, 0, 0);
    doc.rect(160, 20, 10, 10, 'FD'); // filled red square with black borders
    doc.setDrawColor(0);
    doc.setFillColor(255, 255, 255);
    doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); // Black sqaure with rounded corners
    doc.save('graphics.pdf');
}

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:

function demoLine()
{
    var doc = new jsPDF();
    doc.setLineWidth(1);
    doc.setDrawColor(255, 0, 0); // draw red lines
    doc.line(parseInt(document.getElementById("lx1").value), parseInt(document.getElementById("ly1").value), parseInt(document.ge    tElementById("lx2").value), parseInt(document.getElementById("ly2").value));
    doc.save('graphics.pdf');
}
function demoEllipse() {
    var doc = new jsPDF();
    doc.setLineWidth(1);
    doc.setDrawColor(0);
    doc.setFillColor(255, 0, 0);
    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');
}
function demoCircle() {
    var doc = new jsPDF();
    doc.setLineWidth(1);
    doc.setDrawColor(0);
    doc.setFillColor(255, 0, 0);
    doc.circle(parseInt(document.getElementById("cx").value), parseInt(document.getElementById("cy").value), parseInt(document.ge    tElementById("cr").value), 'FD');
    doc.save('graphics.pdf');
}
function demoTriangle() {
    var doc = new jsPDF();
    doc.setLineWidth(1);
    doc.setDrawColor(255, 0, 0);
    doc.setFillColor(0, 0, 255);
    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');
    doc.save('Test.pdf');
}
function demoRectangle() {
    var doc = new jsPDF();
    if (document.getElementById('radio1').checked == true) {
        doc.rect(parseInt(document.getElementById("rx").value), parseInt(document.getElementById("ry").value), parseInt(document.        getElementById("rl").value), parseInt(document.getElementById("rb").value));
    }
    if (document.getElementById('radio2').checked == true) {
        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
    }
    doc.save('graphics.pdf');
}

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.