0.3.1 • Published 7 months ago
canvas-grid-mapper v0.3.1
Canvas Grid Mapper
Canvas Grid Mapper is a lightweight and efficient JavaScript library that abstracts an HTML5 canvas into a customizable, coordinate-based grid system. Designed for developers who need precise control over grid-based visualizations, this package enables effortless coloring of individual grid cells using Cartesian (x, y) coordinates.
Whether you're building interactive pixel art tools, game maps, or data visualizations, Canvas Grid Mapper provides a seamless and intuitive API for rendering structured grids.
✨ Features
- 🖌 Coordinate-Based Coloring – Easily paint cells using Cartesian (x, y) positions.
- 📐 Custom Grid Dimensions – Define grid size, cell spacing, and styling.
- 🎨 Efficient Rendering – Optimized canvas drawing for smooth performance.
- 🛠 Simple API – Designed for clarity and ease of use.
NPM
https://www.npmjs.com/package/canvas-grid-mapper
Importing
Canvas Element
Your page should contain a <canvas>
HTML tag with id=boardCanvas
.
Implement
import { Board } from 'canvas-grid-mapper';
const customCanvasGrid = new Board('40', 'white', 'blue');
customCanvasGrid.fillCell(20, 20);
customCanvasGrid.info();
0.3.1
7 months ago