TypeScript Canvas Utilities

A lightweight, zero-dependency library for HTML5 Canvas development. Inspired by Pygame, built for modern web development.

npm version TypeScript MIT License
View Examples View Package

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.