example-canvas

Drive canvas animations with Helios timing and the HTML5 Canvas API.

94|6|Updated Aug 12, 2025

Search Tags:#performance #timeline #animation #canvas #vanilla-js #2d #helios

Ready to run

npx skills add https://github.com/BintzGavin/helios --skill example-canvas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: example-canvas
Source: https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios/examples/canvas
Command: npx skills add https://github.com/BintzGavin/helios --skill example-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

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

Frequently Asked Questions about example-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create vanilla JavaScript canvas animations without a framework?▼

You can create vanilla JavaScript canvas animations by importing the Helios core library to manage timing and render frames, binding it to the document timeline, and implementing a draw loop using the standard HTML5 Canvas API.

Can I use Helios for 2D and 3D canvas rendering experiments?▼

Yes, Helios supports lightweight, frame-based rendering for both 2D and 3D style canvas patterns, making it suitable for demos and educational experiments on standard web pages.

What is the best way to control animation timing on an HTML5 canvas?▼

The best way to control animation timing is using the Helios core library, which allows you to set parameters like duration and fps, then bind to the document timeline for smooth frame-driven drawings.

How to set up a Helios-powered canvas animation step by step?▼

Add an HTML canvas element, import Helios as an ES module, initialize it with duration and fps, bind it to the document timeline, and implement a draw function using the provided state's current frame.

Do I need any external dependencies to drive canvas animations with Helios?▼

You only need the Helios core library and a vanilla HTML/JS environment; no additional frameworks are required, keeping the setup lightweight for high-performance web animations.