canvas-grid

0.2.1 • Public • Published

Canvas-grid

NPM

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: args[y axis, # of columns, width of cells];
  • drawMatrix: args[Object with attrs "x"(# of columns) & "y"(# of rows)]
  • fillCell: args[columnNumber, rowNumber, color(string, hex or rgba)]
  • clearCell: args[columnNumber, rowNumber]

Example

http://davejustice.com/canvas-grid

License

MIT

Dependents (0)

Package Sidebar

Install

npm i canvas-grid

Weekly Downloads

1

Version

0.2.1

License

MIT

Last publish

Collaborators

  • meandave