ShaderPad can render into an existing canvas, or create an offscreen canvas for headless use.

Canvas Options

const shader = new ShaderPad(fragmentShaderSrc, { canvas })

Valid values for canvas:

• HTMLCanvasElement
• OffscreenCanvas
• { width, height } creates a headless OffscreenCanvas
• null creates a 1 × 1 OffscreenCanvas that you can resize later

Fullscreen Setup

Use the utility helper if you want a simple fullscreen canvas. For responsive resolution, combine it with the autosize plugin:

import ShaderPad from 'shaderpad'
import { createFullscreenCanvas } from 'shaderpad/util'
import autosize from 'shaderpad/plugins/autosize'

const canvas = createFullscreenCanvas()
const shader = new ShaderPad(fragmentShaderSrc, { canvas, plugins: [autosize()] })

Cursor Tracking

cursorTarget controls how u_cursor and u_click are normalized.

const shader = new ShaderPad(fragmentShaderSrc, {
  canvas,
  cursorTarget: window,
})

Use window when the shader responds to viewport-wide input rather than canvas-local input. You can pass any DOM element to track input within that specific container.

Resolution Changes

In most cases, you will want to use the autosize plugin to sync the canvas width and height to its rendered size. For instance, createFullscreenCanvas() creates a canvas that fills the viewport, but without autosize, it will not automatically adjust resolution when the viewport size changes.

ShaderPad automatically updates its internal textures and render targets to match the canvas's resolution, so updating the width and height attributes will also update the GL drawing buffer size, history textures, and other internal state.

If you want to run a callback after resolution changes, use shader.on('updateResolution', callback). If you use the autosize plugin, it emits an autosize:resize event when the rendered size changes.

Related

• Built-in inputs
• autosize plugin
• Utilities