Fireworks (Canvas 2D)

Animated particle fireworks drawn with the plain Canvas 2D API. Click anywhere to fire one. The drawing code names no GTK type and imports no gjsify package, and it still paints into a native GTK 4 window, so a browser animation you like becomes a desktop app as-is.

Adapted from a CodePen by @juliangarnier.

Live demo

Run it

It declares all four runtimes, so pick the one you have:

gjsify showcase canvas2d-fireworks --runtime gjs
gjsify showcase canvas2d-fireworks --runtime node
gjsify showcase canvas2d-fireworks --runtime bun
gjsify showcase canvas2d-fireworks --runtime deno

A GTK 4 window opens with the canvas on the right and an Adwaita sidebar on the left. Click the canvas to fire a firework. The sidebar rows adjust particle count, auto-fire interval, maximum burst radius, and whether fireworks fire on their own.

The animation ticks on the GTK frame clock, so requestAnimationFrame lands on vsync exactly as it does in a browser.

--runtime gjs runs the --app gjs bundle against GJS’s native gi://. The other three run the --app node bundle, where gi:// goes through the node-gi bridge. Drop the flag and the CLI runs the --app gjs bundle when gjs is on PATH, otherwise the --app node bundle on the runtime it is already on.

It is also the showcase to reach for when trying devtools: start it with GJSIFY_DEVTOOLS=1 and the same GetStatus, DumpTree and Screenshot D-Bus calls answer on all four runtimes.

Run it in the browser

import { mount } from '@gjsify/example-dom-canvas2d-fireworks/browser';

const handle = mount(document.getElementById('app')!);
handle.pause();
handle.resume();

Same code, except the <canvas> is a real browser canvas rather than a GTK widget.

What it uses

Package	What it provides
`@gjsify/canvas2d`	`Canvas2DBridge`, a `Gtk.DrawingArea` that draws with Cairo and PangoCairo
`@gjsify/dom-elements`	`HTMLCanvasElement`, `getBoundingClientRect()`, `requestAnimationFrame`
`@gjsify/event-bridge`	GTK 4 pointer input arriving as a DOM `mousedown` event
`@gjsify/adwaita-web`	The Adwaita control panel in the browser build

You do not import any of them. The animation calls ctx.beginPath(), ctx.arc(), ctx.fill(), ctx.stroke() and requestAnimationFrame(), and the build wires those to GTK 4 and Cairo.

Copy the structure

showcases/dom/canvas2d-fireworks/

src/fireworks.ts is the whole simulation behind one start(canvas) function. No platform imports.
src/gjs/gjs.ts plus fireworks-window.blp are the Adw.Application shell and its Blueprint UI.
src/browser/browser.ts exports mount(); browser-main.ts is the standalone full-page entry.

Put your app logic in the middle file and you get both targets for the cost of two small shells.

Bridge widgets covers why Canvas2DBridge is itself a Gtk.DrawingArea, and the onReady() plus installGlobals() lifecycle.
excalibur-jelly-jumper puts a whole game engine on the same bridges.