A reactive HTML5 Canvas management library built on top of PixiJS

Component-oriented approach to canvas rendering, similar to modern frontend frameworks. Build interactive games and applications with ease.

Canvas Engine

Why Canvas Engine?

Reactive Components

Build interactive canvas applications with reactive components that automatically update when data changes.

Flexbox in Canvas

Use familiar CSS Flexbox layout system directly in your canvas applications for responsive designs.

Easy Animations

Create smooth animations with a simple and intuitive animation system built for performance.

Input Controls

Support for keyboard, gamepad, and virtual joystick controls out of the box.

Tiled Map Support

Seamless integration with Tiled Map Editor for creating complex game worlds and levels.

Audio System

Built-in audio system with particle emitters for creating immersive gaming experiences.

Interactive Examples

Try these examples directly in your browser

Hello World

A simple example of how to use CanvasEngine

Preview

Reactivity

Example of using reactivity in CanvasEngine

Preview

With loop and condition syntax

Example of using loop and condition syntax in CanvasEngine

Preview

Drag and Drop

Example of using drag and drop in CanvasEngine

Preview

Sprite Animation

Example of using sprite animation in CanvasEngine

Preview

Sprite Animation and controls

Example of using sprite animation and controls in CanvasEngine. Use the arrow keys to move the sprite.

Preview

Tiled Map

Example of using a Tiled map in CanvasEngine

Preview

DOM with form

Example of using a Tiled map in CanvasEngine

Preview

Animated signal

Example of using an animated signal in CanvasEngine. Click the rect to move it.

Preview

Joystick

Example of using a joystick in CanvasEngine. Use the joystick to move the rect.

Preview