Name: GCanvas
Author: GCanvas

Quick Start

GCanvas provides a clean, object-oriented API for building canvas-based games and visualizations. Get started in minutes with a simple example:

import { Game, Rectangle, Circle } from '@guinetik/gcanvas';

const canvas = document.getElementById('my-canvas');
const game = new Game(canvas);
game.backgroundColor = '#000';
game.enableFluidSize();

game.init();

// Create shapes
const rect = new Rectangle({
  x: 200,
  y: 150,
  width: 100,
  height: 50,
  color: '#1a1a1a',
  stroke: '#0f0',
  lineWidth: 1
});

const circle = new Circle(30, {
  x: 300,
  y: 150,
  color: '#2a2a2a',
  stroke: '#0f0',
  lineWidth: 1
});

// Add to pipeline
game.pipeline.add(rect);
game.pipeline.add(circle);

game.start();

Key Features

🎨 Shape Library

Rich collection of shapes: circles, rectangles, stars, polygons, 3D primitives, and more. All with consistent styling and transformation APIs.

🔄 Rendering Pipeline

Layered architecture from basic positioning (Euclidian) to full rendering (Shape) with transformations, opacity, and shadows.

⚡ Fluent API

Chainable builder pattern for rapid prototyping. Create games declaratively with gcanvas() or creative sketches with sketch().

🎮 Game Objects

Full game loop with update/render cycles, event handling, collision detection, and scene management.

🎭 Motion & Animation

Built-in motion presets (pulse, orbit, oscillate) plus powerful tweening system with 30+ easing functions.

📈 Easing Functions

30+ easing functions for smooth animations. From linear to elastic, bounce to back - all with interactive visualizations.

🔥 Heat Dynamics

Particle-based heat physics: thermal zones, buoyancy forces, and heat transfer. Perfect for fluid simulations and lava lamps.

🎲 3D & Physics

3D shapes, particle systems, and physics simulations. Tidal disruption events, black holes, and advanced visualizations.

📐 Layout Management

Automatic layout systems for organizing game objects. Horizontal, vertical, and tile layouts with spacing and alignment.

Two Ways to Use

1. Object-Oriented API

Full control with classes and explicit game loop management. Perfect for complex games and applications.

import { Game, Scene, GameObject } from '@guinetik/gcanvas';

class MyGame extends Game {
  init() {
    const scene = new Scene(this);
    // Add your game objects
    this.pipeline.add(scene);
  }
}

2. Fluent API

Declarative, chainable API for rapid development. Great for prototypes, creative coding, and simple games.

import { gcanvas } from '@guinetik/gcanvas';

gcanvas({ bg: '#000' })
  .scene('game')
    .go({ x: 200, y: 150 })
      .circle({ radius: 30, fill: '#1a1a1a', stroke: '#0f0' })
      .pulse({ min: 0.8, max: 1.2, duration: 1 })
  .start();

Explore the Demos

Check out these examples to see GCanvas in action. Each demo showcases different aspects of the framework.

Shape Gallery Browse all available shapes including 3D primitives Painter API Low-level canvas drawing abstraction Scene System Layer and organize game objects with scenes Easing Functions Interactive visualization of 30+ easing curves Animations Motion presets and tweening Particle System GameObject-based particle physics Spacetime Curvature General relativity visualization Black Hole Cinematic accretion disk with lensing Lava Lamp Heat dynamics and fluid simulation Space Invaders Classic arcade game clone Blob Feeder Tamagotchi-style micro-game Penrose Diagram Navigate spacetime game

Installation

npm install @guinetik/gcanvas

ES Modules

import { Game, Circle, Rectangle } from '@guinetik/gcanvas';

CDN

<script type="module">
  import { Game } from 'https://cdn.jsdelivr.net/npm/gcanvas/dist/gcanvas.es.min.js';
</script>

Documentation

For complete API documentation, visit the documentation pages in the navigation menu. Each demo includes source code and explanations.