@javinor/canvas-grid v0.0.1

CanvasGrid

Visual representation of a positive integer matrix (board).

Examples

See examples page.

Usage

Initialize

initialize with an args object containing the canvas element and optional initial board or options

var grid = new CanvasGrid({ canvas: document.getElementById('myCanvas') })

default options or grid styles and cell colors:

var defaultOptions =  {
  cellSize: 30,
  lineWidth: 0.5,
  gridColor: 'black',
  valueToColor: ['white', 'black']
}

Render

Render the board (only needed for initial render)

grid.render()

Set a new value / board

set the cell at row 2, column 3 to value of 1:

grid.setValue(2, 3, 1)

or shove in a new board

grid.setBoard([
  [0,1,0],
  [0,1,0],
  [0,1,0]
])

Handle Clicks

Default handling of clicks will be toggle through the valueToColor array given in args.options.

canvas.addEventListener('click', (e) => grid.handleClick(e), false)

You can also supply your own newValueFn that will get the row, col and old value of a cell and return a new value:

grid.options.newValueFn = (row, col, val) => val ? 0 : 1