Visualizing Layout in HTML5 Canvas with Gridlines

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:

image_2

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!

15 thoughts on “Visualizing Layout in HTML5 Canvas with Gridlines”

  1. thanks for this, was overlaying an image with a grid recently;
    so had something simliar; I did find that to have pin sharp lines you need to start the position (iterator) at either -0.5 , or 0.5

     // horizontal grid lines        for(var i = -0.5; i <= canvas.height; i = i + gridPixelSize)        {            context.beginPath();            context.moveTo(0, i);            context.lineTo(canvas.width, i);            context.closePath();            context.stroke();        }        // vertical grid lines        for(var j = -0.5; j <= canvas.width; j = j + gridPixelSize)        {            context.beginPath();            context.moveTo(j, 0);            context.lineTo(j, canvas.height);            context.closePath();            context.stroke();        }

    1.  @0ea769498c5c9b082eb36307d8f59d99:disqus Thanks for the suggestion…I will have to give that a try when I have some spare time.

        1. Right. That’s the behavior you’d expect. If you want to save the output of the canvas to a bitmap, and don’t want the grid, you could just add another iteration of the rendering loop and omit the code that renders the grid, then save the bitmap. Make sense?

  2. $(document).ready(function () {

    var canvas = $(“#myCanvas”).get(0);

    var context = canvas.getContext(“2d”);

    function renderGrid(gridPixelSize, color)

    {

    context.save();

    context.lineWidth = 0.5;

    context.strokeStyle = color;

    // horizontal grid lines

    for(var i = 0; i <= canvas.height; i = i + gridPixelSize)

    {

    context.beginPath();

    context.moveTo(0, i);

    context.lineTo(canvas.width, i);

    context.closePath();

    context.stroke();

    }

    // vertical grid lines

    for(var j = 0; j <= canvas.width; j = j + gridPixelSize)

    {

    context.beginPath();

    context.moveTo(j, 0);

    context.lineTo(j, canvas.height);

    context.closePath();

    context.stroke();

    }

    context.restore();

    }

    renderGrid(10, "red");

    });

  3. $(document).ready(function () {
    var canvas = $(“#myCanvas”).get(0);
    var context = canvas.getContext(“2d”);

    function renderGrid(gridPixelSize, color)
    {
    context.save();
    context.lineWidth = 1;
    context.strokeStyle = color;

    // horizontal grid lines
    for(var i = 0; i <= canvas.height; i = i + gridPixelSize)
    {
    context.beginPath();
    context.moveTo(0, i);
    context.lineTo(canvas.width, i);
    context.closePath();
    context.stroke();
    }

    // vertical grid lines
    for(var j = 0; j <= canvas.width; j = j + gridPixelSize)
    {
    context.beginPath();
    context.moveTo(j, 0);
    context.lineTo(j, canvas.height);
    context.closePath();
    context.stroke();
    }

    context.restore();
    }

    renderGrid(10, "red");
    });

  4. Hi, how i can acces to individualy square in this grid? i wanna color them one by one. I do something like a graph.

    1. In order to color the individual squares, you’d need to calculate the position of each square you want to color, and then add that to the rendering loop.

      Depending on whether the colors are static, or likely to change, you might want to consider not doing this in the main rendering loop, since the more you are doing the higher the potential impact on performance.

      Alternatively, you could use a second canvas to draw the grid lines and colored squares once, and then only update and redraw that during transforms of the main canvas (i.e. don’t redraw the background canvas unless the canvas with the objects that are positioned on the grid is transformed (rotated, skewed, or scaled). For this to work, the foreground canvas would have to avoid drawing any background elements.

      Hope that helps.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.