# 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.&#x20;

```
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.&#x20;

```
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'
    }
})
```