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?

doc.line(x1, y1,x2,y2);

It will draw a line with starting coordinates (x1,y1) and ending coordinates (x2,y2).
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?

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.
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?

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?

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.

6 Comments

Join the conversation! Your thoughts help the community grow.

Junaid Khan9y ago
Can we draw a dotted line in jdpdf Gaurav Katara
Gaurav Katara12y ago
thanku... :)
Gopi Chand12y ago
Excellent topic exploration..Gaurav..
Abhijeet Singh12y ago
nice explaination of jspdf ... keep it up. :)
Gaurav Katara12y ago
thanku... :)
RAVINDER SINGH NEGI12y ago
nice article :-)