@canvas-tile-engine/core

Lightweight, framework-agnostic library for building interactive 2D grid-based maps and visualizations. Handles camera controls, coordinate transformations, layer-based rendering, and event handling.

Install

npm install @canvas-tile-engine/core @canvas-tile-engine/renderer-canvas

Quick Start

<div id="wrapper">
    <canvas></canvas>
</div>

import { CanvasTileEngine } from "@canvas-tile-engine/core";
import { RendererCanvas } from "@canvas-tile-engine/renderer-canvas";

const engine = new CanvasTileEngine(
    document.getElementById("wrapper") as HTMLDivElement,
    {
        scale: 50,
        size: { width: 800, height: 600 },
        backgroundColor: "#337426",
        eventHandlers: { drag: true, zoom: true, click: true },
    },
    new RendererCanvas(),
    { x: 0, y: 0 }
);

engine.drawRect({ x: 0, y: 0, size: 1, style: { fillStyle: "#f9c74f" } });
engine.render();

engine.onClick = (coords) => console.log("Clicked:", coords.snapped);

Architecture

The core package is renderer-agnostic. You inject a renderer that implements the IRenderer interface:

// Canvas2D
import { RendererCanvas } from "@canvas-tile-engine/renderer-canvas";
new CanvasTileEngine(wrapper, config, new RendererCanvas());

// Custom renderer
new CanvasTileEngine(wrapper, config, new MyCustomRenderer());

Documentation

Full API reference and examples: canvastileengine.dev

License

MIT