Utilities

Helper functions for common configuration patterns.

gridToSize

Converts grid-based dimensions (columns/rows) to pixel-based config. Useful when you want to think in terms of "how many cells should be visible" rather than pixel dimensions.

import { gridToSize } from "@canvas-tile-engine/core";

const config = {
    ...gridToSize({ columns: 12, rows: 12, cellSize: 50 }),
    gridAligned: true,
    backgroundColor: "#337426",
    eventHandlers: { drag: true, zoom: true },
};

// Result:
// config.size = { width: 600, height: 600 }
// config.scale = 50

Parameters

Parameter	Type	Description
columns	number	Number of grid columns to display
rows	number	Number of grid rows to display
cellSize	number	Size of each cell in pixels

Returns

{
    size: {
        width: number;
        height: number;
    }
    scale: number;
}

Example: Fixed game board

import { CanvasTileEngine, gridToSize } from "@canvas-tile-engine/core";

const wrapper = document.getElementById("game");

const engine = new CanvasTileEngine(wrapper, {
    ...gridToSize({ columns: 8, rows: 8, cellSize: 60 }),
    gridAligned: true,
    backgroundColor: "#2d2d2d",
    eventHandlers: { click: true, hover: true, drag: false, zoom: false },
});

// Creates a 480x480 pixel canvas showing an 8x8 grid