Kilian Valkhof

gridBuilder.js, background grid generator in canvas

GridBuilder.js is a jQuery plugin that uses canvas to generate a grid background for arbitrary elements. Because it generates the grid via javascript and canvas, it’s much more flexible than using an image background.

Canvas #

…is pretty easy. There are good guides available, not the least the one from Dive into HTML5, Let’s Call It A Draw(ing Surface). You need them, because there are a couple of gotcha’s. For example, to get different colored lines, you need to explicitly start new paths (but you don’t have to explicitly end them, just draw them on the canvas before starting another line). Once you get the way this works, it’s pretty much straightforward from there.

Another example is that in canvas, pixels are seen as small squares (yes, really.) When you draw a line from a pixel, it actually draws the line centered in the top-left corner of the pixel. When it renders, that means that the line gets blurred because it’s actually drawn on two pixels. This means that in order to correctly draw a 1px wide line, on a single pixel, you actually need to position it 0.5 pixel further. (so it’s in the ‘middle’ of the pixel). It turns out, that sort of fails in Firefox (but not in Safari) because of a rounding error. If I used +0.5, Some lines just wouldn’t appear! However, if you just subtract 0.5, then everything works as expected.

Download and demo

The whole project is hosted at github as well: gridBuilder.js on Github. gridBuilder.js is 4kb unpacked, uses jQuery and works in real browsers*. It’s dual licensed under the GPL and MIT licenses.

*A real browser here is defined as one that supports both canvas and data-url’s. The latter is being used to set the canvas as a background image for your element.

Code #

Since it’s a jQuery plugin, gridBuilder.js works for any jquery element. gridBuilder.js offers 5 customizable settings, a primary and secondary color for gridlines and secondary gridlines (positioned in the middle between two gridlines), a height for the vertical rhythm, a width for the horizontal strokes and a gutter (spacing) for between the strokes.

Entering false for any of the options will disable that particular option, so you can for example just have a vertical rhythm and no horizontal strokes, or disable the secondary gridlines. The default settings are shown below.

$(document).ready(function(){
  $("body").gridBuilder({
    color:          '#eee',    // color of the primary gridlines
    secondaryColor: '#f9f9f9', // color of the secondary gridlines
    vertical:       18,        // height of the vertical rhythm
    horizontal:     140,       // width of horizontal strokes
    gutter:         40,        // width of the gutter between strokes
  });
});

While this is a plugin you’d primarily use while building a website, should you want to remove it via javascript, you can call this function:

$("body").destroyGrid();

Future improvements #

I would like to add a floating panel where you can enter all options and have the grid regenerate on the fly, as well as giving you the javascript code to invoke that particular grid. This would make it easier to tweak your grid, since you wouldn’t have to edit your file, save it and then refresh.

It’s hosted on Github, so feel free to fork it and do with it whatever you like :)