CanvasEngine - A reactive HTML5 Canvas management library built on top of PixiJS and Vite

CanvasEngine is a reactive HTML5 Canvas management library built on top of PixiJS and Vite. It provides a component-oriented approach to canvas rendering, similar to modern frontend frameworks.

Features:

• Reactive components
• Use flex in Canvas !
• Easy Animation system
• Keyboard, Gamepad et Virtual Joystick
• Tiled Map Editor integration
• Particle Emitter
• Audio System

Installation

npx degit RSamaium/CanvasEngine/starter my-project
cd my-project
npm install
npm run dev # and go to localhost:5173

Documentation

https://canvasengine.net

Example:

<Container flexDirection="row" width={500}>
    <Sprite 
        image="/assets/logo.png" 
        anchor={0.5}
        rotation
        scale
        pointerenter={onEnter} 
        pointerleave={onLeave}
    />
    <Text text size={70} fontFamily="Helvetica" x={90} y={-30} />
</Container>

<script>
import { signal, tick, animatedSignal, Easing } from "canvasengine";

const { text } = defineProps();
const rotation = signal(0);
const scale = animatedSignal(1, {
    duration: 300,
    ease: Easing.easeInOut,
});

tick(() => {
    rotation.update(rotation => rotation + 0.01);
});

const onEnter = () => {
    scale.set(1.5);
};

const onLeave = () => {
    scale.set(1);
};
</script>

Contributing

Before, install pnpm and run the following command:

git clone https://github.com/RSamaium/CanvasEngine.git
cd CanvasEngine
pnpm install
pnpm run dev # to build the libraries

To run the sample project:

pnpm run dev:sample

Build Documentation/Website

cd docs
pnpm install
pnpm run dev

Release

pnpm run release

Choose the version you want to release

Push the release branch to the remote repository

git push origin v2