This project is part of the @thi.ng/umbrella monorepo and anti-framework.

• 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: 596 bytes

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

Several demos in this repo's /examples directory are using this package.

A selection:

Screenshot	Description	Live demo	Source
	Interactive visualization of closest points on ellipses	Demo	Source
	Minimal rdom-canvas animation	Demo	Source
	rdom & hiccup-canvas interop test	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 - 2023 Karsten Schmidt // Apache License 2.0