Minimal 2D library for helping with working with the canvas
npm install @tinycanvas/core
- ✔ 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
)
npm run start
npm run build
npm run test
- 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
Using vanilla JS and the canvas API to create objects and binding events using the native DOM API
import TC from '@tinycanvas/core';
const game = TC.create();
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();
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();
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();