# Drawing DOM Elements

The Drawing library can convert all or part of an existing page into drawing primitives with the [`drawDOM`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/drawdom) function and then export it to various formats such as PDF, PNG, or SVG.

This is particularly useful when you want to turn content that already exists in the browser—an invoice, a report, a dashboard, or a printable view—into a scene you can export, without re-creating that layout on the server.

```javascript
import { drawDOM } from "@progress/kendo-drawing";

drawDOM(document.querySelector("#content"))
    .then(group => {
        // Export the group to PDF, PNG, or SVG
    });
```

[Demo Source](https://demos.telerik.com/kendo-vue-ui/drawing/drawing-dom-elements/overview/source.txt)

## Exporting the Scene

`drawDOM` walks the live DOM tree starting at the element you pass in and, for every node, reads its actual computed style—the same values the browser used to paint it—to build a matching shape.

Once you have a `Group` from `drawDOM`, you can export it using the available exporters. For example, to export to PDF:

```javascript
import { drawDOM, exportPDF } from "@progress/kendo-drawing";

drawDOM(document.querySelector("#content"))
    .then(group => exportPDF(group))
    .then(dataUri => {
        // Save, upload, or preview the generated PDF.
    });
```

You can similarly use [`exportImage`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/exportimage) or [`exportSVG`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/exportsvg) to produce PNG or SVG output. For more information on the available exporters and their options, refer to the [Exporting Drawings to PDF](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/pdf-output), [Exporting Drawings to Images](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/export-images), and [Exporting Drawings to SVG](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/export-svg) sections.

## Extending the Created Scene

Because the returned `Group` behaves like any other scene, you can extend it with shapes created directly through the Drawing API before you export it—for example, to stamp a watermark, a signature, or a generated barcode onto a captured invoice.

```ts
import { drawDOM, Text, geometry } from '@progress/kendo-drawing';

const { Point } = geometry;

drawDOM(element).then((group) => {
  const watermark = new Text('DRAFT', new Point(20, 20), {
    font: 'bold 24px sans-serif',
    fill: { color: '#ff0000', opacity: 0.4 }
  });

  group.append(watermark);

  return group;
});
```

For the full set of shapes you can combine this way, refer to [Drawing Shapes](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/basic-shapes).

## Redrawing Dynamic Content

`drawDOM` captures a snapshot of the content at the moment it runs—it does not observe subsequent DOM mutations. If the underlying data or layout changes after the promise resolves (for example, a grid loads another page, or a chart animates), call `drawDOM` again to obtain a fresh `Group`.

When the redraw is tied to a frequent event, such as a keystroke or a window resize, debounce the calls. Walking a large DOM tree and waiting for image and font loading on every trigger can turn an otherwise fast operation into a visible slowdown.

## Suggested Links

* [PDF Output](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/pdf-output)
* [Exporting Drawings to Images](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/export-images)
* [Exporting Drawings to SVG](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/export-svg)
* [API Reference of the Drawing Library](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api)