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.
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
Reactivity
Example of using reactivity in CanvasEngine
With loop and condition syntax
Example of using loop and condition syntax in CanvasEngine
Drag and Drop
Example of using drag and drop in CanvasEngine
Sprite Animation
Example of using sprite animation in CanvasEngine
Sprite Animation and controls
Example of using sprite animation and controls in CanvasEngine. Use the arrow keys to move the sprite.
Tiled Map
Example of using a Tiled map in CanvasEngine
DOM with form
Example of using a Tiled map in CanvasEngine
Animated signal
Example of using an animated signal in CanvasEngine. Click the rect to move it.
Joystick
Example of using a joystick in CanvasEngine. Use the joystick to move the rect.