Litecanvas

Litecanvas is a lightweight HTML5 canvas 2D engine suitable for small web games, prototypes, game jams, animations, creative coding, learning game programming and game design, etc.

Warning

This project is still in the "alpha" stage. Break changes may occur frequently. All feedback is welcome and appreciated.

Features

• Tiny: Only ~4KB (minified + gzipped).
• Simple API: Just few functions to draw shapes and some utilities.
• Predefined colors: Just use a number (from 0 to 11) to choose a color in our 12-color palette.
• ZzFX: Play or create sound effects with ZzFX.
• Extensible: Use or create plugins to add functionalities or change the engine.
• Playground: Access or install the playground webapp to code and share games (even offline).

Learn more in the cheatsheet...

Getting Started

You can try our online playground or just installing the basic template:

# requires Node.js
npx tiged litecanvas/template my-game
cd my-game
npm install
npm run dev

If you prefer, you can manually install via NPM:

npm install litecanvas

Show me the code!

// import the package or put a script tag in your HTML
// CDN: https://unpkg.com/litecanvas/dist/dist.dev.js
import litecanvas from 'litecanvas'

// Start and setup the engine
// learn more: https://litecanvas.js.org/about.html#settings
litecanvas({
    loop: { init, update, draw, tapped },
})

// this function runs once at the beginning
function init() {
    bg = 0 // the color #0 (black)
    color = 3 // the color #3 (white)
    radius = W / 10 // the canvas width/10
    posx = CX // center X (or canvas width/2)
    posy = CY // center Y (or canvas width/2)
}

// this function detect clicks/touches
function tapped(x, y) {
    // changes the circle position
    // based on the position of the tap
    posx = x
    posy = y
}

// put the game logic in this function
function update(dt) {
    // make the circle falls 100 pixels per second
    posy += 200 * dt
}

// put the game rendering in this function
function draw() {
    cls(bg) // clear the screen
    circfill(posx, posy, radius, color) // draw a circle
    text(10, 10, 'Tap anywhere') // draw a text
}

Play with this code in the playground

Peek.13-06-2025.12-31.mp4

Demos

Try some demos in the playground:

• Pong
• Bouncing Ball
• Scroller
• 3D projection
• Rendering Benchmark

See other demos in samples folder

Inspirations

• floppy: a micro game engine for beginners.
• PICO-8: fantasy console for making, sharing and playing tiny games.
• js13kGames: a JavaScript coding competition with size limit set to 13 kilobytes.
• raylib: a simple and easy-to-use gamedev library.
• p5.js/Processing: a library for creative coding.
• Pygame Zero: A zero-boilerplate games programming framework for Python 3.