# Dealing with Canvas Elements

Automate HTML canvas elements in Endtest: click at coordinates, simulate drawing, capture canvas screenshots, and run Visual AI assertions on them.

Part of the Endtest documentation (Web Tests). Canonical URL: https://endtest.io/docs/web-tests/dealing-with-canvas-elements

---
## Introduction

The HTML `<canvas>` element is used to draw graphics on the fly via JavaScript.

The items inside a `<canvas>` element do **not** have their own locators.

## Solution

In order to precisely click on a certain position in a `<canvas>` element, you have to provide the offset, by using the **Click with Offset** action:

![endtest canvas](https://app.endtest.io/images/docOffset2.png)

The **Relative Position** represents the number of pixels to the right and down, starting from the top-left corner of your `<canvas>` element.

Since there is no way to retrieve the coordinates of a position from a `<canvas>` element, you can use an `Execute JavaScript` step to draw a line on the `<canvas>` element from the top-left corner to the position you are targeting.

This can help you identify the coordinates of a specific position on a `<canvas>` element.

Sample JavaScript code:

```javascript
canvas = document.querySelector("#map-page > div > canvas");
ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(190, 320);
ctx.stroke();
```