litecanvas

Lightweight HTML5 canvas engine suitable for small games and animations for people who enjoy coding: there is no fancy interface, no visual helpers, no gui tools... just coding.

⚠️ 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 to other things like sounds and math.
• Offline-first: You can install the playground as webapp and use anywhere at any time.
• Predefined colors: just use a number (from 0 to 7) to choose a color in our 8-color palette.
• Predefined sounds: packed with 8 sounds created in ZzFX.

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 start

If you prefer, you can manually install the package via NPM:

npm install @litecanvas/litecanvas

import litecanvas from '@litecanvas/litecanvas'

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

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

// called at 60 fps by default
// use to update your things
function update(dt) {
    // example: tap to change the circle position
    if (TAPPED) {
        posx = TAPX
        posy = TAPY
    }
}

// use to draw your things
function draw() {
    clear(bg) // clear the screen
    circfill(posx, posy, 50, color) // draw a circle
}

Docs

Check out our Cheatsheet.

Basic Demos

Try some demos in our playground:

• Pong
• Bouncing ball
• Scroller
• 3D Projection
• Clip

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.