CanvasTileEngine
A renderer-agnostic TypeScript engine for building zoomable 2D maps, game boards, editors, and grid-based UIs, with camera controls, coordinate math, and hit testing handled for you.
Agent skill included
$ npx skills add enesyukselx/canvas-tile-engineClaude Code, Cursor & friends learn the entire API from one skill — no guessed method names.
Get Started
Pick your stack — the terminal writes itself.
$ npm install @canvas-tile-engine/react @canvas-tile-engine/renderer-canvas
+ @canvas-tile-engine/react
+ @canvas-tile-engine/renderer-canvas
✓ 2 packages ready — start building
Features
Everything you need to build performant, interactive grid-based applications.
High performance
Render 100k+ live tiles at a smooth 60fps, even on huge maps and dense grids.
Pan, zoom & camera
Drag, wheel, and pinch out of the box — plus animated flights and fitBounds framing any region for you.
Vector paths
Filled shapes with holes, curves, and dash patterns that flow around rounded corners — identical on every renderer.
Renderer-agnostic
Swap between Canvas2D, WebGL, Skia, or server rendering without changing your logic.
Built-in hit testing
Ask what's under the pointer — geometry-exact point and box queries that hand back the data you attached to each item.
Viewport culling
Spatial indexing and static caching mean only visible tiles get rendered.
What you can build
A few of the surfaces Canvas Tile Engine is built for.
Example 01
Maps & game boards
Pan across huge worlds and zoom from overview to tile detail while viewport culling keeps frame rates flat. Strategy games, board games, interactive map editors — the camera math is done for you.
Example 02
Pixel & sprite editors
Snap every pointer event to the grid, paint into layers, and redraw only what changed. The coordinate conversions that make editors fiddly to build are handled by the engine.
Example 03
Dashboards & minimaps
Render thousands of live cells without breaking a sweat. Drive tile colors straight from your data, and add a minimap with a second synced camera in a few lines.
Example 04
Animated sprites & living worlds
Slice frames straight out of a spritesheet and let fps-gated animators flip them while your own loop mutates positions — wings flap at 8 fps, movement runs at 60. Click anywhere on the map and the nearest dragon flies there.
Example 05
Vector routes & hit testing
Draw transit lines as vector paths — rounded corners flow the geometry, strokes keep a constant pixel width at any zoom — and label stations with text that never scales away. Click a station and the camera flies to it.
Example 06
Server-rendered snapshots
The same draw API runs headless in Node.js — no browser, no DOM. This PNG is generated live by this site's own API route with renderToBuffer: hit regenerate and watch the server redraw a fresh map in milliseconds. Perfect for OG images, thumbnails, and CDN pre-rendering.
Try it without installing
Edit TypeScript or React with real type hints, hit run, and watch the canvas react — right in your browser.
Open the playground