Litecanvas

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

⚠️ This project is still under development. All feedback is 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 the package via NPM:

npm install litecanvas

// import the engine or put the script in your HTML
// CDN: https://unpkg.com/litecanvas/dist/dist.min.js
import litecanvas from 'litecanvas'

// you can setup other configurations here
// learn more in the cheatsheet
litecanvas({
    loop: { init, update, draw, tapped },
})

function init() {
    // this function run once
    // before the game starts
    bg = 0
    color = 3
    radius = 32
    posx = CENTERX
    posy = CENTERY
}

// this function detect taps/clicks
// and changes the circle position
function tapped(x, y) {
    posx = x
    posy = y
}

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

// this function render the game scene
function draw() {
    cls(bg) // clear the screen
    circfill(posx, posy, radius, color) // draw a circle
}

Docs

Check out our Cheatsheet.

Basic Demos

Try some demos in our playground:

• Pong
• Bouncing Ball
• Scroller
• 3D rojection
• 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.