Skip to content

Documentation / spryte / drawElement

Function: drawElement() ​

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

Defined in: element.ts:55

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

el ​

HTMLElement

x ​

number

y ​

number

o? ​

ElementDrawOptions = {}

Returns ​

boolean