Getting started

Install valo for Rust or valo-web for JavaScript, then record a display list.

Drawing is two steps: record commands into a DisplayList (no GPU device), then submit that list to a Context to render on the GPU. The rectangle below is that first draw, running on this page.

scene.jsplayground

loading editor

liveacquiring device

Rust

cargo add valo wgpu

The full Rust API is on docs.rs.

use valo::{Color, DisplayListBuilder, Paint, Rect};

let mut builder = DisplayListBuilder::new();
builder.draw_rect(
    Rect::new(40.0, 40.0, 240.0, 140.0),
    &Paint::from_color(Color::rgb(0.78, 1.0, 0.24)),
);
let display_list = builder.build();

Rendering needs a Context from a host-owned wgpu device and queue, and a target: a Surface over a winit window or an HTML canvas, or Offscreen when no display is needed.

let mut context = valo::Context::new(device, queue);
if let Some(frame) = surface.acquire() {
    context.render(&display_list, &frame.target(Some(Color::BLACK)));
    context.present(frame);
}

Device setup: native Rust or Rust in the browser.

JavaScript and TypeScript

npm install valo-web

import {
  DisplayListBuilder,
  Paint,
  createDevice,
  initializeValo,
} from 'valo-web/raw';

await initializeValo();
const device = await createDevice();
const renderer = device.attach(document.querySelector('canvas')!);

const builder = new DisplayListBuilder();
const paint = new Paint(0.78, 1, 0.24, 1);
builder.drawRect(40, 40, 240, 140, paint);
const list = builder.build();
const stats = renderer.render(list, true, 0.04, 0.04, 0.05, 1);

// Valo's resources are allocated in WebAssembly memory and need to be freed manually.
stats?.free();
list.free();
builder.free();
paint.free();
renderer.free();
device.free();

For Canvas2D-shaped code, use the adapter:

import { createValoCanvas } from 'valo-web';

const context = await createValoCanvas(document.querySelector('canvas')!);
context.fillStyle = '#c8ff3d';
context.fillRect(40, 40, 240, 140);

The default WebAssembly build requires WebGPU and a secure context (HTTPS or localhost). For older browsers, valo-web/compat can fall back to WebGL2; that build is larger and cannot share one device across several canvases. The Canvas2D adapter requires WebGPU.

More on the engine API and Canvas2D adapter. Next: Paint.

Getting started

Rust

JavaScript and TypeScript

On this page