Getting Started with the Kendo UI for Angular Drawing

Updated on Sep 18, 2026

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

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 install --save @progress/kendo-drawing

sh

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 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:

TS

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
• Drawing DOM Elements
• PDF Output
• Exporting Drawings to Images
• Exporting Drawings to SVG
• Drawing API
• Getting Started with Kendo UI for Angular