@tinycanvas WIP

Minimal 2D library for helping with working with the canvas

Example - Docs

Installation

npm install @tinycanvas/core

What's Included

• ✔ Collision detection
• ✔ Easy object creation API
• ✔ Levels
• ❌ Spritesheet
• ❌ Text
• ✔ Animations (with @tinycanvas/animations)
• ✔ WASD / Arrow key / Mouse click / Enter key object listener (with @tinycanvas/interactions)

Running

npm run start

Building

npm run build

Testing

npm run test

Tooling

• web-test-runner as a testing configuration helper.
  • playwright as the browser launcher
  • mocha as the test runner and testing syntax.
• github actions for CI
• size-limit for tracking bundle size
• eslint for linting
• husky for pre-commit hooks
• jsdoc for documentation

Development

Using vanilla JS and the canvas API to create objects and binding events using the native DOM API

API

Create game

import TC from '@tinycanvas/core';

const game = TC.create();

Draw a square

import TC from '@tinycanvas/core';

const game = TC.create();
const square = game.add.object({
  name: 'square',
  init: (self) => {
    self.x = 100;
    self.y = 100;
    self.width = 50;
    self.height = 50;
  },
  render: (self) => self.context.drawRect(self.x / 2, self.y / 2, self.width, self.height),
});

game.start();

Movable square

import TC from '@tinycanvas/core';
import { ArrowKeys } from '@tinycanvas/interaction';

const game = TC.create();
const square = game.add.object({
  name: 'square',
  init: (self) => {
    self.x = 100;
    self.y = 100;
    self.width = 50;
    self.height = 50;
    // delta defines how far to move
    self.delta = 50;
  },
  render: (self) => {
    self.context.drawRect(self.x / 2, self.y / 2, self.width, self.height);
  },
  interactions: [ArrowKeys],
});

game.start();

Movable square with custom movement

import TC from '@tinycanvas/core';
import { ArrowKeys } from '@tinycanvas/interaction';

const game = TC.create();
const square = game.add.object({
  name: 'square',
  init: (self) => {
    self.x = 100;
    self.y = 100;
    self.width = 50;
    self.height = 50;
    // delta defines how far to move
    self.delta = 50;
  },
  render: (self) => self.context.drawRect(self.x / 2, self.y / 2, self.width, self.height),
  interactions: [ArrowKeys],
  create: (self) => {
    // You can add multiple of for a single event, but adding one will remove the default behaviour
    self.on(ArrowKeys.LEFT, self.moveLeft);
  },
  moveLeft: (self) => {
    self.x =- self.delta / 2;
  }
});

game.start();