@thi.ng/rdom component wrapper for @thi.ng/hiccup-canvas and declarative canvas drawing
npm install @thi.ng/rdom-canvas
!npm downloads

> [!NOTE]
> This is one of 214 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! ❤️
- About
- General usage
- Control attributes
- Status
- Related packages
- Installation
- Dependencies
- Usage examples
- API
- Authors
- License
@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.
``ts tangle:export/readme1.ts
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__clear
before drawing
- : clear background flag. If true clears the canvas before drawing__dpr
- : device pixel ratio aka pixel density override (else defaults towindow.devicePixelRatio
)
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
`bash`
yarn add @thi.ng/rdom-canvas
ESM import:
`ts`
import * as rc from "@thi.ng/rdom-canvas";
Browser ESM import:
`html`
Package sizes (brotli'd, pre-treeshake): ESM: 718 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)
10 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 |
|
| Animated t-SNE visualization of 4D data | Demo | Source |
TODO
If this project contributes to an academic publication, please cite it as:
`bibtex``
@misc{thing-rdom-canvas,
title = "@thi.ng/rdom-canvas",
author = "Karsten Schmidt",
note = "https://thi.ng/rdom-canvas",
year = 2020
}
© 2020 - 2026 Karsten Schmidt // Apache License 2.0