• 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.

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

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/rdom-canvas"></script>

Skypack documentation

For Node.js REPL:

const rdomCanvas = await import("@thi.ng/rdom-canvas");

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

• @thi.ng/api
• @thi.ng/associative
• @thi.ng/canvas
• @thi.ng/checks
• @thi.ng/hiccup-canvas
• @thi.ng/rdom
• @thi.ng/rstream

Several 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

Generated API docs

TODO

• Karsten Schmidt

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