canvas-grid v0.2.1

Canvas-grid

Draw a grid on canvas and be able to interact with rows, and columns as well as get data about the grid.

Usage

var CanvasGrid = require('canvas-grid');

var cvs = document.getElementById('grid');
var grid = new CanvasGrid(cvs, {
  borderColor: '#777'
});

var activeColor = '#ff0beb';

grid.drawMatrix({
  x: 16,
  y: 4
});

cvs.addEventListener('click', function(ev) {
  if (ev.gridInfo.color.hex !== activeColor) {
    grid.fillCell(ev.gridInfo.x, ev.gridInfo.y, activeColor);
  } else {
    grid.clearCell(ev.gridInfo.x, ev.gridInfo.y);
  }
});
  

Available Methods:

• drawRow: argsy axis, # of columns, width of cells;
• drawMatrix: argsObject with attrs "x"(# of columns) & "y"(# of rows)
• fillCell: argscolumnNumber, rowNumber, color(string, hex or rgba)
• clearCell: argscolumnNumber, rowNumber

Example

http://davejustice.com/canvas-grid

License

MIT