#Graphpaper

A javascript module to create HTML elements that display graphpaper like grids. Graphpaper uses WebGL to render grids onto canvas elements.

##Getting started

Include the script

<script src="graphpaper.min.js"></script>

Create a graphpaper and attach it to the DOM

document.body.appendChild(new Graphpaper().element);

Alternatively, use the npm package, along with something like Browserify.

npm install graphpaper --save

##Examples

Basic
Animate
Scroll and Zoom (Click and drag to scroll. Use + and - to zoom.)

##Usage

The constuctor returns a new Graphpaper object. Using new is optional.

var graphpaper = new Graphpaper();

The object has an element property that references a DOM canvas element on which the graphpaper is rendered.

The constructor accepts a properties object. Each property will override the default property value.

var graphpaper = new Graphpaper({cellWidth: 5, cellHeight, 5});

To change properties after the graphpaper has been created you can use the setProps function.

graphpaper.setProps({offsetX: 4, offsetY: 4});

Changing a property using the setProps function will cause the graphpaper to re-render. The

The graphpaper can be forced to re-render at any time using draw. However this isn't necessary with normal usage.

graphpaper.draw(); 

Properties

| name | default | description | ---- | ------- | ----------- |.width | 601 | The pixel width of the canvas element. |.height | 801| The pixel height of the canvas element. |.cellWidth | 10| The pixel width of each cell. |.cellHeight | 10| The pixel height of each cell. |.majorRows | 10| Number of cells in a major row. |.majorCols | 10| Number of cells in a major column. |.minorColor | [0.0, 1.0, 0.0, 0.2]| An array of normalized RGBA values. The line color for cells. |.majorColor | [0.0, 1.0, 0.0, 0.6]| An array of normalized RGBA values. The line color for major rows and columns. |.offsetX | 0| The left pixel offset of cells. |.offsetY | 0| The top pixel offset of cells. |.alpha | 1| The global alpha value. Alpha components of majorColor and minorColor are multiplied by this value.