example-canvas

What problem does it solve?

Patterns for using Helios with Vanilla Canvas API to enable high-performance, framework-free animations on the web.

Core Features & Use Cases

• Direct integration of Helios timing with the HTML5 Canvas API for frame-driven drawings.
• Lightweight approach suitable for 2D/3D style canvas experiments, demos, and educational projects.
• Use Case: Build a performant canvas animation that responds to a document timeline with smooth timing control.

Quick Start

HTML Setup

• Add a canvas element with id "canvas" to your page: <canvas id="canvas"></canvas>
• Load the Helios-enabled script: <script type="module" src="./main.js"></script>

Logic Setup

• Import Helios and initialize: import { Helios } from '@helios-project/core'; const helios = new Helios({ duration: 5, fps: 60 });
• Bind to timeline and implement a draw loop: helios.bindToDocumentTimeline(); // Implement draw(state) using state.currentFrame and render to canvas