How to Draw Lines When Creating PDF Document with JavaScript

Home
/
Articles
/
How to Draw Lines When Creating PDF Document with JavaScript

This example shows how to draw lines when creating PDF file in JavaScript with BytescoutPDF.js (Bytescout PDF Generator for JavaScript).
Bytescout PDF Generator for JS lets you to draw line of custom color and width and use different line caps – butt, round or square.

// function that creates BytescoutPDF instance (defined in BytescoutPDF.js script which have to be included into the same page)
// then calls API methods and properties to create PDF document
// and returns created BytescoutPDF object instance
// this CreatePDF() function is called from Sample.html

function CreatePDF() {

    // create BytescoutPDF object instance
    var pdf = new BytescoutPDF();

    // set document properties: Title, subject, keywords, author name and creator name
    pdf.propertiesSet("Sample document title", "Sample subject", "keyword1, keyword 2, keyword3", "Document Author Name", "Document Creator Name");

    // set page size
    pdf.pageSetSize(BytescoutPDF.A4);

    // set page orientation (BytescoutPDF.PORTRAIT = portrait, BytescoutPDF.LANDSCAPE = landscape)
    pdf.pageSetOrientation(BytescoutPDF.PORTRAIT);

    // add new page
    pdf.pageAdd();

    // draw lines with different widths
    for (var j = 0; j < 10; j++) {
        // set color in RGB format (0,0,0 is black color)
        pdf.graphicsSetColor(0, 0, 0);

        // set line width
        pdf.graphicsSetLineWidth(1 + j);

        // draw a line from one point to another
        pdf.graphicsDrawLine(20, 20 + j * 15, 120, 20 + j * 15);
    }

    // draw lines with different colors (trying different Green components
    for (var j = 0; j < 25; j++) {
        // set new line color in RGB format by changing G component
        pdf.graphicsSetColor(25, 10 * j, 25);

        // set line width
        pdf.graphicsSetLineWidth(3);

        // draw a line from one point to another
        pdf.graphicsDrawLine(140, 20 + j * 8, 300, 20 + j * 8);
    }


    // draw lines with different line endings
    // available line endings:
    // BytescoutPDF.BUTT_CAP (default)
    // BytescoutPDF.ROUND_CAP
    // BytescoutPDF.PROJECTING_SQUARE_CAP

    // draw line with line end type = 0

    // set new line color in RGB format to Black (0,0,0)
    pdf.graphicsSetColor(0, 0, 0);

    // set line width
    pdf.graphicsSetLineWidth(10);
    // set line ending type
    pdf.graphicsSetLineEndType(BytescoutPDF.BUTT_CAP);

    // draw a line from one point to another
    pdf.graphicsDrawLine(320, 20, 380, 20);

    // set line width
    pdf.graphicsSetLineWidth(10);
    // set line ending type
    pdf.graphicsSetLineEndType(BytescoutPDF.ROUND_CAP);

    // draw a line from one point to another
    pdf.graphicsDrawLine(320, 40, 380, 40);

    // set line width
    pdf.graphicsSetLineWidth(10);
    // set line ending type
    pdf.graphicsSetLineEndType(BytescoutPDF.PROJECTING_SQUARE_CAP);

    // draw a line from one point to another
    pdf.graphicsDrawLine(320, 60, 380, 60);


    // return BytescoutPDF object instance
    return pdf;
}

Generated PDF file with various lines (click to view full size):

Tutorials:

Web API