Easily get started.

HTML

                            
<body>
    ...
    <container>
        <canvas id="yourGrid"></canvas>
    </container>
    ...
    <script src="js/grid.js"></script>
</body>

Javascript

                            
...
var settings = {
    lineColor: '#FFFFFF',
    opacity: .3,
    lineDuration: 150,
    interval: 50
}

var canvas = document.getElementById('yourGrid');
var ctx = canvas.getContext('2d');

var height = canvas.clientHeight;
var width = canvas.clientWidth;

var grid = new GridCanvas(ctx, height, width, settings);
grid.start();
...

Settings

Setting	Accepts	Default	Description
`height`	Number (Any)	`null`	Height of the grid element.
`width`	Number (Any)	`null`	Width of the grid element.
`lineColor`	String (Form of '#******')	`'#FFFFFF'`	The color of the lines drawn.
`rowLineCount`	Number (Any)	`20`	Number of rows drawn.
`columnLineCount`	Number (Any)	`20`	Number of columns drawn.
`opacity`	Decimal (0-1)	`.7`	The opacity of the lines drawn.
`interval`	Number (Any)	`50`	Time between line creation. Should be in ms, but isn't currently.
`lineDuration`	Number (Any)	`1000`	How long the line takes to reach it's full length. Should be in ms, but isn't currently.
`fillParent`	Boolean	`true`	Whether or not the grid should fill the parent of the canvas element.
`animateOnRedraw`	Boolean	`false`	Whether or not the grid should animate after a redraw (ex. resize).
`gridAsSquares`	Boolean	`true`	Whether or not the grid should form perfect squares.
`gridSquareSize`	Number (Any)	`75`	If `gridAsSquares` is true, this is the size in pixels of the grid squares.

Functions

Name	Arguments	Purpose
`.start()`	`null`	Initializes the grid element.
`.stop()`	`null`	Stops the grid element.
`.updateRes(height, width)`	`height`:New Height `width`:New Width	Changes the resolution of the grid.
`.updateSettings(newSettings)`	`newSettings`:Object containing the new settings	Changes the settings of the grid.

Events

Name	Arguments	Purpose
`.onAnimationFinish(fn)`	`fn`: Function that is called when the event fires	Fires when the grid animation finishes.
`.onGridResize(fn)`	`fn`: Function that is called when the event fires	Fires when the grid is resized, either by the code or by the window.