I’m in the process of finalizing my preparations for tomorrow’s HTML5 Game Camp in New York City, and figured I’d share one of the functions I put together to help in the process of visualizing some of the different ways you can draw and manipulate objects on an HTML5 Canvas object. It’s a simple function called renderGrid, which takes as arguments the ID of the canvas you want to draw on, the pixel interval for the gridlines, and the color of the lines, and draws out a grid just like you’d see on graph paper. Call this function before you start drawing objects on your canvas, and you’ll have a nice reference grid to help you more easily visualize the layout. You can customize it to your liking by tweaking the pixel interval, and it’s relatively unobtrusive in your code.
Here’s what it looks like, with a Bezier curve drawn with the function, context.quadraticCurveTo(250, 100, 450, 250);, with a grid pixel interval of 10:
And here’s a fiddle with the code:
Keep in mind that the more lines you draw, and the higher your target frame rate, the bigger the impact on your performance. You might consider drawing to a second canvas element behind the first, with less frequent updates, to mitigate this.
Hope you find it useful!