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 install the NPM package:

npm i litecanvas

or just use add a <script> tag with our CDN link:

<script src="https://unpkg.com/litecanvas"></script>

Show me the code!

// import the package if you installed via NPM
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 = W / 2 // center X (or canvas Width/2)
    posy = H / 2 // center Y (or canvas Height/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 200 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.