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.
-
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.
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
}
Check out our Cheatsheet.
Try some demos in our playground:
- 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.