Docs
Getting started

Images

Load your first image

Use the resources instance created with ResourcesWebGPU.create() to register an image before displaying it in your layout.

const image_url = 'assets/coin.png'
const response = await fetch(image_url)
const blob = await response.blob()
const image = await createImageBitmap(blob)

resources.registerImage(image_url, { image })

ui.root.style('backgroundImage', image_url)
ui.root.style('backgroundSize', '32px 32px')
ui.root.style('backgroundRepeat', 'repeat')
  • resources.registerImage(image_url, { image }) registers the bitmap under the image_url identifier.
  • ui.root.style('backgroundImage', image_url) uses the registered image as the root node's background.

Demo

On this page