Note
This is one of 199 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.
🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️
@thi.ng/rdom component wrapper for @thi.ng/hiccup-canvas and declarative canvas drawing. Please consult these packages' READMEs for further background information...
As with most thi.ng/rdom components, the state (aka geometry/scenegraph) for the canvas component is being sourced from a thi.ng/rstream subscription. The canvas redraws every time that subscription delivers a new value. The size of the canvas can be given as a subscription too and if so will also automatically trigger resizing of the canvas.
The geometry to rendered to the canvas is expressed as thi.ng/hiccup, specifically the flavor used by thi.ng/hiccup-canvas, which (not just coincidentally) is the same as also used by thi.ng/geom shapes.
import { circle, group } from "@thi.ng/geom";
import { $canvas } from "@thi.ng/rdom-canvas";
import { fromRAF } from "@thi.ng/rstream";
import { repeatedly } from "@thi.ng/transducers";
// create geometry stream/subscription
const geo = fromRAF().map((t) =>
// shape group w/ attribs (also see section in readme)
group({ __background: "#0ff" }, [
// create 10 circles
...repeatedly(
(i) =>
circle(
[
Math.sin(t * 0.01 + i * 0.5) * 150 + 300,
Math.sin(t * 0.03 + i * 0.5) * 150 + 300
],
50,
// colors can be given as RGBA vectors or CSS
{ fill: [i * 0.1, 0, i * 0.05] }
),
10
)
])
);
// create & mount canvas component (w/ fixed size)
$canvas(geo, [600, 600]).mount(document.body);The root shape/group support the following special attributes:
__background: background color. If given, fills the canvas will given color before drawing__clear: clear background flag. If true clears the canvas before drawing
Also see relevant section in the thi.ng/hiccup-canvas README...
ALPHA - bleeding edge / work-in-progress
Search or submit any issues for this package
- @thi.ng/hiccup-canvas - Hiccup shape tree renderer for vanilla Canvas 2D contexts
- @thi.ng/hiccup-svg - SVG element functions for @thi.ng/hiccup & related tooling
- @thi.ng/geom - Functional, polymorphic API for 2D geometry types & SVG generation
- @thi.ng/scenegraph - Extensible 2D/3D scene graph with @thi.ng/hiccup-canvas support
yarn add @thi.ng/rdom-canvasESM import:
import * as rc from "@thi.ng/rdom-canvas";Browser ESM import:
<script type="module" src="https://esm.run/@thi.ng/rdom-canvas"></script>Package sizes (brotli'd, pre-treeshake): ESM: 715 bytes
- @thi.ng/api
- @thi.ng/canvas
- @thi.ng/checks
- @thi.ng/hiccup-canvas
- @thi.ng/object-utils
- @thi.ng/rdom
- @thi.ng/rstream
Note: @thi.ng/api is in most cases a type-only import (not used at runtime)
Nine projects in this repo's /examples directory are using this package:
| Screenshot | Description | Live demo | Source |
|---|---|---|---|
 |
Basic 2D boid simulation and spatial indexing neighbor lookups | Demo | Source |
 |
Interactive visualization of closest points on ellipses | Demo | Source |
 |
2.5D hidden line visualization of digital elevation files (DEM) | Demo | Source |
 |
Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang | Demo | Source |
 |
Quasi-random lattice generator | Demo | Source |
 |
Minimal rdom-canvas animation | Demo | Source |
 |
rdom & hiccup-canvas interop test | Demo | Source |
 |
Fitting, transforming & plotting 10k data points per frame using SIMD | Demo | Source |
 |
Multi-layer vectorization & dithering of bitmap images | Demo | Source |
TODO
If this project contributes to an academic publication, please cite it as:
@misc{thing-rdom-canvas,
title = "@thi.ng/rdom-canvas",
author = "Karsten Schmidt",
note = "https://thi.ng/rdom-canvas",
year = 2020
}© 2020 - 2024 Karsten Schmidt // Apache License 2.0