<br />

Helper class to visualize the result of a MediaPipe Vision task.

**Signature:**

```typescript
export declare class DrawingUtils 
```

## Constructors

| Constructor | Modifiers | Description |
|---|---|---|
| [(constructor)(gpuContext)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsconstructor) |   | Creates a new DrawingUtils class. |
| [(constructor)(cpuContext, gpuContext)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsconstructor_1) |   | Creates a new DrawingUtils class. |

## Methods

| Method | Modifiers | Description |
|---|---|---|
| [clamp(x, x0, x1)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsclamp) | `static` | Restricts a number between two endpoints (order doesn't matter). |
| [lerp(x, x0, x1, y0, y1)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilslerp) | `static` | Linearly interpolates a value between two points, clamping that value to the endpoints. |
| [drawLandmarks(landmarks, style)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsdrawlandmarks) |   | Draws circles onto the provided landmarks. This method can only be used when `DrawingUtils` is initialized with a `CanvasRenderingContext2D`. |
| [drawConnectors(landmarks, connections, style)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsdrawconnectors) |   | Draws lines between landmarks (given a connection graph). This method can only be used when `DrawingUtils` is initialized with a `CanvasRenderingContext2D`. |
| [drawBoundingBox(boundingBox, style)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsdrawboundingbox) |   | Draws a bounding box. This method can only be used when `DrawingUtils` is initialized with a `CanvasRenderingContext2D`. |
| [drawCategoryMask(mask, categoryToColorMap, background)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsdrawcategorymask) |   | Draws a category mask using the provided category-to-color mapping. |
| [drawCategoryMask(mask, categoryToColorMap, background)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsdrawcategorymask_1) |   | Draws a category mask using the provided color array. |
| [drawConfidenceMask(mask, defaultTexture, overlayTexture)](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsdrawconfidencemask) |   | Blends two images using the provided confidence mask. If you are using an `ImageData` or `HTMLImageElement` as your data source and drawing the result onto a `WebGL2RenderingContext`, this method uploads the image data to the GPU. For still image input that gets re-used every frame, you can reduce the cost of re-uploading these images by passing a `HTMLCanvasElement` instead. |
| [close()](https://developers.google.com/edge/api/mediapipe/js/tasks-vision.drawingutils.md.txt#drawingutilsclose) |   | Frees all WebGL resources held by this class. |

## DrawingUtils.(constructor) {#drawingutilsconstructor}

Creates a new DrawingUtils class.

**Signature:**

```typescript
constructor(gpuContext: WebGL2RenderingContext);
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| gpuContext | WebGL2RenderingContext | The WebGL canvas rendering context to render into. If your Task is using a GPU delegate, the context must be obtained from its canvas (provided via `setOptions({ canvas: .. })`). |

## DrawingUtils.(constructor) {#drawingutilsconstructor_1}

Creates a new DrawingUtils class.

**Signature:**

```typescript
constructor(cpuContext: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, gpuContext?: WebGL2RenderingContext);
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| cpuContext | CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D | The 2D canvas rendering context to render into. If you are rendering GPU data you must also provide `gpuContext` to allow for data conversion. |
| gpuContext | WebGL2RenderingContext | A WebGL canvas that is used for GPU rendering and for converting GPU to CPU data. If your Task is using a GPU delegate, the context must be obtained from its canvas (provided via `setOptions({ canvas: .. })`). |

## DrawingUtils.clamp() {#drawingutilsclamp}

Restricts a number between two endpoints (order doesn't matter).

**Signature:**

```typescript
static clamp(x: number, x0: number, x1: number): number;
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| x | number | The number to clamp. |
| x0 | number | The first boundary. |
| x1 | number | The second boundary. |

**Returns:**

number

## DrawingUtils.lerp() {#drawingutilslerp}

Linearly interpolates a value between two points, clamping that value to the endpoints.

**Signature:**

```typescript
static lerp(x: number, x0: number, x1: number, y0: number, y1: number): number;
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| x | number | The number to interpolate. |
| x0 | number | The x coordinate of the start value. |
| x1 | number | The x coordinate of the end value. |
| y0 | number | The y coordinate of the start value. |
| y1 | number | The y coordinate of the end value. |

**Returns:**

number

## DrawingUtils.drawLandmarks() {#drawingutilsdrawlandmarks}

Draws circles onto the provided landmarks. This method can only be used when `DrawingUtils` is initialized with a `CanvasRenderingContext2D`.

**Signature:**

```typescript
drawLandmarks(landmarks?: NormalizedLandmark[], style?: DrawingOptions): void;
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| landmarks | NormalizedLandmark\[\] | The landmarks to draw. |
| style | DrawingOptions | The style to visualize the landmarks. |

**Returns:**

void

## DrawingUtils.drawConnectors() {#drawingutilsdrawconnectors}

Draws lines between landmarks (given a connection graph). This method can only be used when `DrawingUtils` is initialized with a `CanvasRenderingContext2D`.

**Signature:**

```typescript
drawConnectors(landmarks?: NormalizedLandmark[], connections?: Connection[], style?: DrawingOptions): void;
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| landmarks | NormalizedLandmark\[\] | The landmarks to draw. |
| connections | Connection\[\] | The connections array that contains the start and the end indices for the connections to draw. |
| style | DrawingOptions | The style to visualize the landmarks. |

**Returns:**

void

## DrawingUtils.drawBoundingBox() {#drawingutilsdrawboundingbox}

Draws a bounding box. This method can only be used when `DrawingUtils` is initialized with a `CanvasRenderingContext2D`.

**Signature:**

```typescript
drawBoundingBox(boundingBox: BoundingBox, style?: DrawingOptions): void;
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| boundingBox | BoundingBox | The bounding box to draw. |
| style | DrawingOptions | The style to visualize the bounding box. |

**Returns:**

void

## DrawingUtils.drawCategoryMask() {#drawingutilsdrawcategorymask}

Draws a category mask using the provided category-to-color mapping.

**Signature:**

```typescript
drawCategoryMask(mask: MPMask, categoryToColorMap: Map<number, RGBAColor>, background?: RGBAColor | ImageSource): void;
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| mask | MPMask | A category mask that was returned from a segmentation task. |
| categoryToColorMap | Map\<number, RGBAColor\> | A map that maps category indices to RGBA values. You must specify a map entry for each category. |
| background | RGBAColor \| ImageSource | A color or image to use as the background. Defaults to black. |

**Returns:**

void

## DrawingUtils.drawCategoryMask() {#drawingutilsdrawcategorymask_1}

Draws a category mask using the provided color array.

**Signature:**

```typescript
drawCategoryMask(mask: MPMask, categoryToColorMap: RGBAColor[], background?: RGBAColor | ImageSource): void;
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| mask | MPMask | A category mask that was returned from a segmentation task. |
| categoryToColorMap | RGBAColor\[\] | An array that maps indices to RGBA values. The array's indices must correspond to the category indices of the model and an entry must be provided for each category. |
| background | RGBAColor \| ImageSource | A color or image to use as the background. Defaults to black. |

**Returns:**

void

## DrawingUtils.drawConfidenceMask() {#drawingutilsdrawconfidencemask}

Blends two images using the provided confidence mask. If you are using an `ImageData` or `HTMLImageElement` as your data source and drawing the result onto a `WebGL2RenderingContext`, this method uploads the image data to the GPU. For still image input that gets re-used every frame, you can reduce the cost of re-uploading these images by passing a `HTMLCanvasElement` instead.

**Signature:**

```typescript
drawConfidenceMask(mask: MPMask, defaultTexture: RGBAColor | ImageSource, overlayTexture: RGBAColor | ImageSource): void;
```

### Parameters

| Parameter | Type | Description |
|---|---|---|
| mask | MPMask | A confidence mask that was returned from a segmentation task. |
| defaultTexture | RGBAColor \| ImageSource | An image or a four-channel color that will be used when confidence values are low. |
| overlayTexture | RGBAColor \| ImageSource | An image or four-channel color that will be used when confidence values are high. |

**Returns:**

void

## DrawingUtils.close() {#drawingutilsclose}

Frees all WebGL resources held by this class.

**Signature:**

```typescript
close(): void;
```

**Returns:**

void