Namibian Pyjama Merchant
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.15 • Public • Published


    npm version npm downloads Twitter Follow

    This project is part of the monorepo.

    About component wrapper for declarative canvas scenegraphs.

    This package provides a re-usable canvas component, which accepts child nodes defining a scene tree of different shape types in standard syntax/format (i.e. nested arrays) and then translates these into canvas API draw calls during the hdom update process / cycle.


    STABLE - used in production

    Search or submit any issues for this package


    The actual tree traversal & drawing has been extracted to the new package for better re-usability, also outside without hdom.

    Related packages


    yarn add

    ES module import:

    <script type="module" src=""></script>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    > const hdomCanvas = await import("");

    Package sizes (gzipped, pre-treeshake): ESM: 914 bytes


    Usage examples

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

    A selection:

    Screenshot Description Live demo Source
    Interactive inverse FFT toy synth Demo Source
    Convex hull & shape clipping of 2D polygons Demo Source
    Doodle w/ K-nearest neighbor search result visualization Demo Source
    Poisson-disk shape-aware sampling, Voronoi & Minimum Spanning Tree visualization Demo Source
    Realtime analog clock demo Demo Source
    Interactive pattern drawing demo using transducers Demo Source
    2D Bezier curve-guided particle system Demo Source
    Various hdom-canvas shape drawing examples & SVG conversion / export Demo Source
    Canvas based Immediate Mode GUI components Demo Source
    Minimal IMGUI usage example Demo Source
    Animated sine plasma effect visualized using contour lines Demo Source
    Basic rstream-gestures multi-touch demo Demo Source
    Unison wavetable synth with waveform editor Demo Source
    Animated Voronoi diagram, cubic splines & SVG download Demo Source
    2D scenegraph & shape picking Demo Source
    2D scenegraph & image map based geometry manipulation Demo Source
    Fork-join worker-based raymarch renderer (JS/CPU only) Demo Source


    Generated API docs

    import { start } from "";
    import { canvas } from "";
    start(() => {
        const t = * 0.001;
        return [canvas, { width: 100, height: 100 },
            ["circle", { fill: "red", stroke: "black" }, [50, 50], 25 + 25 * Math.sin(t)]

    Usage with shape primitives:

    import { start } from "";
    import { canvas } from "";
    import * as g from "";
    start(() => {
        const t = * 0.001;
        return [canvas, { width: 100, height: 100 },
                { translate: [50, 50], fill: "none" },
                        g.asPolygon(, 6),
                        { rotate: t % Math.PI, stroke: "red" }
           + 25 * Math.sin(t), 6, [0.5, 1], { stroke: "blue" }),

    How it works

    The package provides a canvas component which uses the branch-local behavior implementation feature of v5.0.0 to support virtual SVG-like shape elements / components. These are defined as part of the main UI component tree just like any other component, but are then translated into canvas API draw commands during the hdom update process. Any embedded shape component functions receive the user context object as first arg, just like normal hdom components.

    Shape components are expressed in standard hiccup syntax (or as objects implementing the IToHiccup() interface, like the shape types provided by, and with the following...

    Restrictions & behavior controls

    • Shape component objects with life cycle methods are only partially supported, i.e. only the render & release methods are used.
    • For performance reasons release methods are disabled by default. If your shape tree contains stateful components which use the release life cycle method, you'll need to explicitly enable the canvas component's __release control attribute by setting it to true.
    • Currently no event listeners can be assigned to shapes (ignored), though this is planned for a future version. The canvas element itself can of course have event handlers as usual.

    For best performance it's recommended to ensure all resulting shapes elements are provided in already normalized hiccup format, i.e.

    [tag, {attribs}, ...] // or
    [tag, null, ...]

    That way the __normalize: false control attribute can be added either to the canvas component itself (or to individual shapes / groups), and if present, will skip normalization of that element's children.

    Likewise, for animated scenes, the __diff control attribute should be set to false to skip unnecessary diffing and force redraws.

    To disable the automatic background clearing of the canvas, set the __clear attribute to false.

    [canvas, { width: 100, height: 100, __clear: false }, ...]

    HDPI support

    The canvas component automatically adjusts its size for HDPI displays by adding CSS width & height properties and pre-scaling the drawing context accordingly before any shapes are processed. For fullscreen canvases simply set the width & height attribs to:

            width: window.innerWidth,
            height: window.innerHeight
        // shapes

    SVG conversion

    Even though the element names & syntax are very similar to SVG elements, for performance reasons all geometry data given to each shape remains un-stringified (only styling attributes are). However, the package provides a convertTree() function which takes the arguably more "raw" shape format used by hdom-canvas and converts an entire shape tree into SVG compatible & serializable format. Note: the tree MUST first be normalized (if not already) using hdom-canvas' normalizeTree().

    import { serialize } from "";
    import { convertTree, svg } from "";
    import { normalizeTree } from "";
        svg({ width: 100, height: 100},
                    {}, // default normalization options
                            fill: "red",
                            stroke: "none",
                            translate: [50, 50]
                        ["circle", {}, [0, 0], 25],
                        ["polygon", { fill: "white" },
    <svg version="1.1" xmlns="" xmlns:xlink="" width="100" height="100">
        <g transform="translate(50.00 50.00)" fill="red" stroke="none">
            <circle cx="0.00" cy="0.00" r="25.00"/>
            <polygon points="-10.00,10.00 10.00,10.00 0.00,-10.00" fill="white"/>

    Supported shape types

    Please see the README for the full list of supported shapes, gradients, attributes, colors and transformations.




    If this project contributes to an academic publication, please cite it as:

      title = "",
      author = "Karsten Schmidt and others",
      note = "",
      year = 2018


    © 2018 - 2022 Karsten Schmidt // Apache Software License 2.0


    npm i

    DownloadsWeekly Downloads






    Unpacked Size

    52.8 kB

    Total Files


    Last publish