TypeScript Canvas Utilities
A lightweight, zero-dependency library for HTML5 Canvas development. Inspired by Pygame, built for modern web development.
Installation
npm install canvas-utils-lib
Quick Start
import { CustomEvent, Rect, Sprite, Group } from "canvas-utils-lib";
const canvas = document.querySelector("canvas")!;
const ctx = canvas.getContext("2d")!;
const input = new CustomEvent(canvas);
function gameLoop() {
const state = input.getState();
if (state.leftPressed) {
console.log(`Mouse at: ${state.mouseX}, ${state.mouseY}`);
}
requestAnimationFrame(gameLoop);
}
gameLoop();
Interactive Examples
Input Handling
Move your mouse and click to see input detection in action.
Rectangle Collision
Move the blue rectangle with arrow keys to test collision detection.
Sprite Groups
Click to spawn sprites that move and interact in groups.