Canvas Tile Engine

Build zoomable 2D maps, game boards, editors, minimaps, and data-heavy grid views with one renderer-agnostic TypeScript engine.

Canvas Tile Engine gives you the hard parts of a tile surface out of the box: camera movement, pan/zoom gestures, coordinate transforms, layered drawing, pointer events, viewport culling, static caches, and renderer adapters for web, native, and server output.

Start with Canvas2D. Swap to WebGL when you want batched GPU primitives. Reuse the same React component model in React Native with Skia. Render PNG/JPEG/WebP snapshots on the server with no browser.

AI Agent Skill

This repository ships an Agent Skill that teaches AI coding agents (Claude Code, Cursor, Codex, and compatible tools) the full Canvas Tile Engine API, so they can build tile maps, game boards, minimaps, and pixel editors with these packages on the first try.

Install with the skills CLI (works across agents):

npx skills add enesyukselx/canvas-tile-engine

See skills/ for details and manual installation.

Why It Exists

• Grid-first API for maps, strategy games, pixel tools, editors, dashboards, and spatial UIs.
• Camera controls, bounds, smooth movement, resize handling, and pointer-to-world coordinate math are already wired.
• Draw rects, circles, images, sprites, grid lines, lines, text, paths, static layers, and custom draw functions.
• Use the core engine directly or render declaratively with React and React Native components.
• Keep large static scenes responsive with spatial indexing, viewport culling, and renderer-level caching.
• Choose the surface that fits the job: Canvas2D, WebGL, React Native Skia, or headless Node.js image output.

Packages

Package	Use it for
@canvas-tile-engine/core	Framework-agnostic engine, camera, events, coordinates, layers, draw API, sprites, and spatial indexing.
@canvas-tile-engine/react	Declarative React bindings with compound draw components and a reusable engine hook.
@canvas-tile-engine/react-native	React Native bindings with the same component API, mounted through Skia gestures and layout.
@canvas-tile-engine/renderer-canvas	Default HTML Canvas2D renderer with full primitive support, static caches, debug HUD, and high-DPI output.
@canvas-tile-engine/renderer-webgl	Drop-in WebGL renderer for batched GPU drawing of geometry, images, paths, lines, and grids.
@canvas-tile-engine/renderer-skia	React Native Skia renderer used by the native package.
@canvas-tile-engine/renderer-server	Headless Node.js renderer for deterministic PNG/JPEG/WebP buffers, OG images, thumbnails, and snapshot tests.

Install

Vanilla web with Canvas2D:

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

React web:

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

WebGL renderer:

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

React Native with Skia on Expo:

npx expo install @shopify/react-native-skia
npm install @canvas-tile-engine/core @canvas-tile-engine/react-native @canvas-tile-engine/renderer-skia

Bare React Native:

npm install @canvas-tile-engine/core @canvas-tile-engine/react-native @canvas-tile-engine/renderer-skia @shopify/react-native-skia
cd ios && pod install

Server-side image rendering:

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

Quick Start

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

This is the beginning of the README. Read the rest at the original. Read the full README ↗