# Function: drawElement()

> **drawElement**(`draw`, `el`, `x`, `y`, `o?`): `boolean`

Defined in: [element.ts:55](https://github.com/debuffjp/debuff/blob/b018c1a068ef1bc6d0d897e130238baa96957244/packages/spryte/src/element.ts#L55)

Draw a DOM element (a menu, a text field, wrapped or rich text) with its top-left at `x, y`, through the
browser's HTML-in-Canvas API. The element stays live DOM: it takes clicks, focus and typing where it is
drawn, and screen readers read it. The first call moves it into the canvas and draws nothing; later calls
show its layout from the previous frame. Returns false, drawing nothing, where the API is missing (Chrome and
Edge 157 and later have it; Firefox and Safari don't), inside `into()` or a mask, and until the browser has
painted the element once.

Inside the canvas, the element's CSS margins and position don't place it on screen: `x, y` do. Keep the CSS for
browsers without the API, where the element stays in the page.

```ts
if (!drawElement(draw, menu, 40, 30)) drawCanvasMenu(); // your fallback
```

## Parameters

### draw

[`Draw`](../classes/Draw.md)

### el

`HTMLElement`

### x

`number`

### y

`number`

### o?

[`ElementDrawOptions`](../interfaces/ElementDrawOptions.md) = `{}`

## Returns

`boolean`