---
title: "CanvasLayer"
description: "CanvasLayer"
language: "en"
canonical: "https://l7.antv.antgroup.com/en/api/other/canvas/"
---

[Resource index](/llms.txt)

CanvasLayer allows users to customize the content and style of the layer through canvas drawing methods. Compared to Marker by creating the actual DOM, CanvasLayer undoubtedly has better performance.

## use

```jsx
import { CanvasLayer } from '@antv/l7';
const layer = new CanvasLayer({}).style({
  drawingOnCanvas: (option) => {
    const { size, ctx, mapService } = option;
    const [width, height] = size;

    ctx.clearRect(0, 0, width, height);
    // canvas 绘制
  },
});
```

<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*hUmNQJ1sAb8AAAAAAAAAAAAAARQnAQ'/>

[Online case](/en/examples/point/chart/custom/)

### source

🌟 CanvasLayer does not need to set source.

### event

🌟 CanvasLayer does not support interactive actions yet.

### animate

When the user is drawing a canvas animation, in order to update the animation, the animate method needs to be executed.

```javascript
layer.animate(true);
```

[Online case](/en/examples/point/chart/custom/)

### style

#### zIndex

Each time a CanvasLayer is created, L7 will generate an instance of the Canvas DOM. We adjust the level of the CanvasLayer by setting the zIndex value.

#### update

Specify the update method of CanavsLayer. update has two values ​​'always' and 'dragend'. The default is 'always'

- always always updated
- dragend The map is updated after dragging/zooming.

#### drawingOnCanvas(options)

```javascript
options: {
  canvas: HTMLCanvasELement;
  ctx: CanvasRenderingContext2D;
  mapService: IMapService;
  size: [number, number];
}
```

drawingOnCanvas, this is a function that accepts relevant parameters. The user writes the canvas drawing logic in this function.

- canvas DOM node generated by canvas CanvasLayer
- The context of the canvas DOM generated by ctx
- mapService mapService of the current map, mainly provides lngLatToContainer method
- size The actual drawing range size of the current view

#### lngLatToContainer(\[lng,lat]): {x: x, y: y}

This method is provided by the mapService parameter and is mainly used to convert latitude and longitude point data into xy coordinates that can be used in Canvas drawing in real time, so as to achieve the correspondence between the drawing content and the location of the map.

```javascript
var center = [120, 30];
var centerXY = mapService.lngLatToContainer(center); // {x: 100, y: 100}
// centerXY means 100px from the upper left corner of the view in the x-axis direction and 100px in the y-axis direction
// canvas drawing coordinate system
```