---
title: Screen Elements
slug: /screen-elements
section: User Interface
---

Please consider [html based first](/docs/html) but if the UI makes more sense in-canvas look to [screen elements](#screen-elements).

## Screen Elements

In Excalibur, if you want to display something like a HUD element or UI element inside the Excalibur canvas, you can create an instance of [[ScreenElement]]. A screen element has the following semantics that differ from a regular [actor](/docs/actors):

- They automatically [capture pointer events](/docs/pointers#handling-pointer-events-on-actors)
- They do not participate in collisions
- They appear above all "normal" actors in a [scene](/docs/scenes)
- Invoking [[ScreenElement.contains]] will check against [screen coordinates](/docs/screens#screen-coordinates) by default.

Other than that, they are the same as normal actors where you can assign drawings, perform actions, etc.

```ts
import * as ex from 'excalibur'
import Resources from './resources'

class StartButton extends ex.ScreenElement {
  constructor() {
    super({
      x: 50,
      y: 50,
    })
  }

  onInitialize() {
    this.graphics.add('idle', Resources.StartButtonBackground)
    this.graphics.add('hover', Resources.StartButtonHovered)

    this.on('pointerup', () => {
      alert("I've been clicked")
    })

    this.on('pointerenter', () => {
      this.graphics.use('hover')
    })

    this.on('pointerleave', () => {
      this.graphics.use('idle')
    })
  }
}

game.add(new StartButton())
game.start()
```