DOCSEARCHbyAlgolia
Submit Docs

Canvas Commons Documentation

website·Indexed 31 days ago

https://canvascommons.io

A framework for creating explanatory animations using code. Features include a node-based hierarchy, tweening and spring animations, LaTeX support, project variables, and a plugin system for Node.js, runtime, and editor extensions. Includes tools for rendering animations via image sequences or FFmpeg video export, as well as a presentation mode with slide management.

Tokens
178.1K
Snippets
1.5K
Records
2K
Agent score
55%

What's inside Canvas Commons

  1. Overview of Canvas Commons

    Canvas Commons is a specialized toolset designed for creating informative vector animations and synchronizing them with voice-overs. It is not intended as a replacement for traditional video editing software. The system consists of two primary components: a TypeScript library that utilizes generators to program animations, and an editor that provides a real-time preview of those animations and allows for the editing of specific animation aspects (such as time events).

  2. Overview of GeneratorScene

    GeneratorSceneT is the default implementation of the Scene interface. It uses generators to control animations and manages the lifecycle, rendering, and state of a scene within the project.
    abstract class GeneratorSceneT implements SceneThreadGeneratorFactoryTThreadable

  3. Overview of PathDataBuilder

    PathDataBuilder is a utility class used to programmatically construct SVG path data strings. It provides a fluent interface to define shapes and paths that can be passed to Path2D objects or other renderers such as Rough.js.
    const builder = new PathDataBuilder();
const pathData = builder.moveTo(0, 0).lineTo(10, 10).toString();

  4. Overview of the Curve abstract class

    The Curve class is an abstract extension of Shape. It provides the base functionality for all curve-based components in the 2D API. Subclasses that extend Curve include Bezier, Circle, Line, Path, Polygon, Ray, Rect, and Spline.

  5. Canvas Commons animation and typesetting features

    Canvas Commons provides advanced programmatic control over visuals and text, including:

    • Typesetting: Support for Txt.split() (grapheme/word/sentence nodes), text along SVG paths or live Curves, Knuth–Plass wrapMode, hyphenation, justification, and wrapping text around shapes.
    • Animation: Rough/hand-drawn shape rendering, animated layouts, explicit space positioning, and improved interpolation for paths, SVGs, and images.
    • LaTeX: Simplified editing for LaTeX mathematical expressions.
    • Workflow: Ability to export/copy frames and copy coordinates in viewport space.

  6. Implement the Inspectable interface for Scene components

    Scenes can implement the Inspectable interface to enable their components to be inspected via the UI. This interface provides a set of methods to handle how elements are identified, transformed, and displayed in the properties panel and on the canvas overlay.

  7. Draw Cubic and Quadratic Bézier curves

    Canvas Commons provides CubicBezier and QuadBezier components to draw Bézier curves. A Quadratic Bézier curve uses one control point, while a Cubic Bézier curve uses two. For more complex shapes, use the Spline component instead.

  8. Implement a custom exporter using the Exporter interface

    The Exporter interface is the main interface used to implement custom exporters. It provides a lifecycle for preparing configuration, initializing resources, handling individual rendered frames, and performing final cleanup.

  9. Matrix2D Overview and Representation

    The Matrix2D class implements TypeWebGLConvertible and represents a 2D transformation using a specialized 2x3 matrix. It contains six elements defined as [a, b, c, d, tx, ty], which serves as a shortcut for a 3x3 matrix of the form [a, b, 0, c, d, 0, tx, ty, 1].

    Because it ignores z-values, it does not satisfy all standard 3x3 matrix properties: it has no transpose, and certain distributive and scalar properties (e.g., A(B + C) = AB + AC) do not hold.

  10. SplineProps Interface Overview

    The SplineProps interface extends CurveProps, providing a set of properties used to configure spline curves in a 2D canvas environment. It includes properties for layout, positioning, visual styling, and curve-specific behavior.
    interface SplineProps extends CurveProps

  11. Understand Canvas Commons versioning and compatibility

    Canvas Commons uses the semver (semantic versioning) scheme. Releases sharing the same major version are backwards compatible. For example, an animation created with v3.2.0 will remain compatible with v3.2.1, v3.3.0, and v3.4.0.

  12. Use the SVG class for drawing and animating SVG images

    The SVG class extends Shape and is used to create a Node specifically for drawing and animating SVG images. If animation is not required, the Img component is recommended as an alternative.
    class SVG extends Shape