# Getting Started with the Kendo UI for Angular Drawing

This article covers adding the Drawing package to your project, importing its functions, and rendering your first scene.

<CtaPanelOverview></CtaPanelOverview>

## Installing the Package

To add the Kendo UI Drawing package to your project, run the following command. The package has no third-party dependencies:

```sh npm
npm install --save @progress/kendo-drawing
```

```sh yarn
yarn add @progress/kendo-drawing
```

## Importing the Functions

After you install the Drawing package, import what you need directly from `@progress/kendo-drawing`:

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

Depending on what you want to build, you will typically need:

* Shapes and surfaces—`Surface`, `Text`, `Circle`, `Path`, `Group`, and other types for constructing and rendering a scene.
* `geometry`—Helpers such as `Point`, `Rect`, and `Matrix` for positioning, sizing, and transforming shapes.
* `pdf`—Functions such as `exportPDF` for generating PDF documents from a scene.

Check the [API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/api) for a complete list of what you can import.

## Creating Your First Drawing

A drawing consists of a **surface**, which is the visual host that renders the scene, and one or more **shapes**, such as `Text`, `Circle`, or `Path`, which describe what to render. Create the surface on a container element, construct the shapes you need, and pass them to the surface's `draw()` method to render them.

The following example demonstrates how to create a drawing surface in an Angular component:

```typescript
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { Surface, Text, geometry } from '@progress/kendo-drawing';

const { Point } = geometry;

@Component({
  selector: 'my-app',
  template: ` <div #canvas></div> `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('canvas') canvasRef!: ElementRef;

  ngAfterViewInit() {
    const surface = Surface.create(this.canvasRef.nativeElement, { type: 'canvas' });
    const text = new Text('Hello, Kendo Drawing!', new Point(100, 100), { font: '18px sans-serif' });

    surface.draw(text);
  }
}
```

## Dependencies

The Kendo UI Drawing package has no third-party dependencies. It requires only the following internal Progress packages, which are automatically installed:

* `@progress/kendo-common`—Shared utilities.
* `@progress/pako-esm`—Compression for PDF export.

## Suggested Links

* [Drawing Shapes](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/basic-shapes)
* [Drawing DOM Elements](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/draw-dom)
* [PDF Output](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/pdf-output)
* [Exporting Drawings to Images](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/export-images)
* [Exporting Drawings to SVG](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/export-svg)
* [Drawing API](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/api)
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)