PDF: Create

Create an HTML container with ID to render the graphical context element

<div id="myPdf"> </div>

Create PDF renderer

To create the PDF, invoke pdfLayer method with ContainerID "#myCanvas". It returns the Canvas2D renderer instance. For more details on canvasLayer please refer: API Reference -> Layers -> Canvas Layer Page.

let renderer = i2d.pdfLayer('#myPdf', {
                                    # Config
                                     height: 800,
                                     width: 500,
                                     info: { 
                                           title: "I2Djs Pdf",
                                           author: "I2Djs" },
                                     margin: 5,
                                     defaultFont: "Helvetica" 
                                }, { 
                                    # Layer Config
                                     onUpdate: () => {} 
                                });

Create Page

renderer.addPage() api creates pdf Page and returns the page handler.

let pageHandler = renderer.addPage({})

Create elements:

pageHandler.createEl() API creates Element of type 'el' with 'attr' attributes and 'style' properties. In the below example we are creating Circle with attributes specified in the attr object and styles in the style object.

let circle = pageHandler.createEl({
    el: 'circle',
    attr: {
        r: 50,
        cx: renderer.width / 2,
        cy: renderer.height / 2
    },
    style: {
        fillStyle: '#ff0000'
    }
})

To create multiple circles based on Data array - call createEls(DataArray, ElementConfig)

let circle = pageHandler.createEls([1,2,3,4], {
    el: 'circle',
    attr: {
        r: 50,
        cx: function (d) { return d * 100 },
        cy: function (d) { return d * 100 }
    },
    style: {
        fillStyle: '#ff0000'
    }
})