A library for drawing various types of grids on HTML5's Canvas. Here are the functions available on the grid object. Each takes a context object to draw the grid to, x, y, w and h values to form a rect where the grid will be drawn, and other parameters that usually have to do with the resolution of the grid.
square(context, x, y, w, h, majorRes, minorRes, thirdRes) // draws a square grid with three possible resolutions. Each resolution can have a different line weight and color
rect(context, x, y, w, h, resx, resy) // draws a rectangular grid where each cell can have a different width and height.
isometric(context, x, y, w, h, res) // an isometric grid. all angles are 60 degrees.
dimetric(context, x, y, w, h, res) // a dimetric or "fake isometric" grid. there are 2 different angles, but the width of one "tile" is exactly twice the height.
polar(context, x, y, w, h, res, degrees, cx, cy) // draws a polar or circular grid. you can specify the size of the concentric rings, the angle of each "slice" and the center x and y.
hex(context, x, y, w, h, res) // draws a hexagonal grid.
dots(context, x, y, w, h, majorRes, minorRes) // draws a square grid of dots. major and minor resolutions use different sized and colored dots.
hexDots(context, x, y, w, h, res) // draws a hex grid using dots
plus(context, x, y, w, h, plusSize, res) // draws a square grid using + symbols.
triangle(context, x, y, w, h, res) // draws a grid of triangles.
diamond(context, x, y, w, h, res) // draws a grid of diamonds.
celtic(context, x, y, w, h, res) // draws a square grid overlayed with a diamond grid. useful for drawing celtic knot patterns.
Properties: These affect how the grid is drawn - line width, color, dot size. The major properties affect lines/dots drawn at the major resolution, minor affects the minor resolution, and third, the third resolution.
majorLineWidth
majorStrokeStyle
majorDotSize
majorFillStyle
minorLineWidth
minorStrokeStyle
minorDotSize
minorFillStyle
thirdLineWidth
thirdStrokeStyle
