@litecanvas/litecanvas NPM

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.

:warning: This project is still under development. All feedback is appreciated! :warning:

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 11) to choose a color in our 12-color palette.
Predefined sounds: packed with 4 sounds created in ZzFX.

Learn more

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:

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.