Getting Started with the Kendo UI Drawing

This guide provides the information you need to start using the Kendo UI Drawing—it includes instructions about the installation approach, how to import the required modules, and a basic example to create your first drawing.

Installing the Package

To add the Kendo UI Drawing package, run the following command:

sh

npm install --save @progress/kendo-drawing

Importing the Modules

After you install the Drawing package, import the necessary modules:

js

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

The package exports three main namespaces:

• drawing—Core drawing shapes and surface functionality.
• geometry—Geometric primitives (Point, Rect, Circle, Matrix).
• pdf—PDF export functionality.

Creating Your First Drawing

The following example demonstrates how to create a basic drawing and render it to a canvas:

html

<div id="canvas"></div>

js

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

const { Point } = geometry;

// Create a drawing surface
const element = document.getElementById('canvas');
const surface = Surface.create(element, { type: 'canvas' });

// Create and draw text
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.

Next Steps

• Basic Shapes
• Exporting Drawings to Images
• Exporting Drawings to SVG
• Drawing DOM Elements
• PDF Output

Suggested Links

• Drawing Overview
• Drawing API Index