litecanvas

Litecanvas is a lightweight HTML5 canvas engine suitable for small games, animations and creative programming for people who enjoy 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.
• 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.
• Extensible: Use or create plugins to add functionalities or change the engine.
• Offline Playground: Install the playground webapp and use anywhere at any time.

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

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 Projection

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.