Example Canvas

Vanilla Canvas Patterns

Use Helios directly with the HTML5 Canvas API. This provides the lowest overhead and highest performance.

Quick Start

1. HTML Setup

<!-- composition.html -->
<canvas id="canvas"></canvas>
<script type="module" src="./main.js"></script>

2. Logic Setup

// main.js
import { Helios } from '@helios-project/core';

// Setup
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = 1920;
const height = 1080;

canvas.width = width;
canvas.height = height;

// Initialize Helios
const helios = new Helios({
  duration: 5,
  fps: 60
});
helios.bindToDocumentTimeline();
window.helios = helios;

// Draw Function
function draw(frame) {
  // Clear
  ctx.clearRect(0, 0, width, height);

  // Calculate state
  const time = frame / helios.fps;
  const t = time / helios.duration; // 0..1

  // Draw
  const x = t * (width - 100);
  ctx.fillStyle = 'tomato';
  ctx.fillRect(x, height / 2 - 50, 100, 100);
}

// Subscribe
helios.subscribe((state) => {
  draw(state.currentFrame);
});

// Initial Render
draw(0);

Performance Tips

• Pre-calculate values: Do heavy math (like sine tables or physics simulations) upfront if possible.
• OffscreenCanvas: For very complex scenes, consider rendering in a Web Worker using OffscreenCanvas to keep the main thread free.
• Batch Draw Calls: Minimize context state changes (fillStyle, strokeStyle, etc).

Source Files

• Example: examples/simple-canvas-animation/