---
title: "CanvasSourceSpecification | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Type Alias CanvasSourceSpecification

Options to add a canvas source type to the map.

type CanvasSourceSpecification \= {  
    [animate](#animate)?: boolean;  
    [canvas](#canvas)?: string | [HTMLCanvasElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCanvasElement/);  
    [coordinates](#coordinates): \[  
        \[number, number\],  
        \[number, number\],  
        \[number, number\],  
        \[number, number\],  
    \];  
    [type](#type): "canvas";  
}

##### Index

### Properties[](#properties)

[animate?](#animate) [canvas?](#canvas) [coordinates](#coordinates) [type](#type)

## Properties[](#properties-1)

### `Optional`animate[](#animate)

animate?: boolean

Whether the canvas source is animated. If the canvas is static (i.e. pixels do not need to be re-read on every frame), `animate` should be set to `false` to improve performance.

#### Default Value[](#default-value)

```typescript
true
```

### `Optional`canvas[](#canvas)

canvas?: string | [HTMLCanvasElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCanvasElement/)

Canvas source from which to read pixels. Can be a string representing the ID of the canvas element, or the `HTMLCanvasElement` itself.

### coordinates[](#coordinates)

coordinates: \[  
    \[number, number\],  
    \[number, number\],  
    \[number, number\],  
    \[number, number\],  
\]

Four geographical coordinates denoting where to place the corners of the canvas, specified in `[longitude, latitude]` pairs.

### type[](#type)

type: "canvas"

Source type. Must be `"canvas"`.