DrawingUtils class

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

Signature:

export declare class DrawingUtils

Methods

Method Modifiers Description
clamp(x, x0, x1) static Restricts a number between two endpoints (order doesn't matter).
lerp(x, x0, x1, y0, y1) static Linearly interpolates a value between two points, clamping that value to the endpoints.
drawLandmarks(landmarks, style) Draws circles onto the provided landmarks. This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D.
drawConnectors(landmarks, connections, style) Draws lines between landmarks (given a connection graph). This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D.
drawBoundingBox(boundingBox, style) Draws a bounding box. This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D.
drawCategoryMask(mask, categoryToColorMap, background) Draws a category mask using the provided category-to-color mapping.
drawCategoryMask(mask, categoryToColorMap, background) Draws a category mask using the provided color array.
drawConfidenceMask(mask, defaultTexture, overlayTexture) 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() Frees all WebGL resources held by this class.

DrawingUtils.clamp()

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

Signature:

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()

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

Signature:

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()

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

Signature:

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()

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

Signature:

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()

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

Signature:

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()

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

Signature:

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 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()

Draws a category mask using the provided color array.

Signature:

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()

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:

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()

Frees all WebGL resources held by this class.

Signature:

close(): void;

Returns:

void