!@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

About

@thi.ng/rdom component wrapper for @thi.ng/hiccup-canvas and declarative canvas drawing. Please consult these packages' READMEs for further
background information...

$3

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);
`

$3

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
- __dpr: device pixel ratio aka pixel density override (else defaults to
window.devicePixelRatio)

Also see relevant section in the thi.ng/hiccup-canvas
README...

Status

ALPHA - bleeding edge / work-in-progress

Search or submit any issues for this package

Related packages

- @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

Installation

`bash
yarn add @thi.ng/rdom-canvas
`

ESM import:

`ts
import * as rc from "@thi.ng/rdom-canvas";
`

Browser ESM import:

`html

`

JSDelivr documentation

Package sizes (brotli'd, pre-treeshake): ESM: 718 bytes

Dependencies

- @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)

Usage examples

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 |

API

Generated API docs

TODO

Authors

- Karsten Schmidt

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
}
``

License

© 2020 - 2026 Karsten Schmidt // Apache License 2.0