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

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.