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 co-ordinates (x1,y1) and ending co-ordinates (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);
- 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);
- doc.setLineWidth(0.1);
- doc.line(90, 15, 90, 50);
- 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);
- doc.setFillColor(0, 0, 255);
- doc.ellipse(90, 35, 10, 5, 'F');
- doc.setLineWidth(1);
- doc.setDrawColor(0);
- doc.setFillColor(255, 0, 0);
- doc.circle(135, 35, 5, 'FD');
- 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);
- doc.rect(50, 20, 10, 10, 'F');
- doc.setDrawColor(255, 0, 0);
- doc.rect(80, 20, 10, 10);
- doc.setDrawColor(255, 0, 0);
- doc.rect(110, 20, 10, 10, 'FD');
- doc.setDrawColor(0);
- doc.setFillColor(255, 0, 0);
- doc.rect(140, 20, 10, 10, 'F');
- doc.setDrawColor(0);
- doc.setFillColor(255, 0, 0);
- doc.rect(160, 20, 10, 10, 'FD');
- doc.setDrawColor(0);
- doc.setFillColor(255, 255, 255);
- doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD');
- 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);
- 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);
- }
- doc.save('graphics.pdf');
- }
ConclusionI 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.