HTML 5: Draw the Grid lines on the Canvas

This article demonstrates how can we draw the grid lines on the HTML 5 canvas object. You can See the below demo in which you can reset the thickness and size of the grid lines from the drop down options.

[Demo]




Choose color: Thickness of the lines: Grid Lines space:

[Complete Source code]

<!DOCTYPE html>
<html>
<head>
    <title>Draw the Grid Lines on canvas In HTML5</title>
    <!– Written by Hirendra sisodiya for
    the authorcode.com–>
 
    <script>
        var gridOptions = {
            color: '#f2f2f2',
            GridSize: 15,
            LinesSize: 1
        };
        var ctx, canvas;
        function displayGrid() {
            var i, Height, Width, GridSize;
            canvas = document.getElementById("myCanvas");
            if (canvas.getContext) {
                ctx = canvas.getContext("2d");
                var Height = canvas.height;
                var Width = canvas.width;
                ctx.strokeStyle = gridOptions.color;
                ctx.lineWidth = parseInt(gridOptions.LinesSize);
                GridSize = 0;
                GridSize = parseInt(gridOptions.GridSize);
                for (i = 0; i < Height; i += GridSize) {
                    ctx.moveTo(0, i);
                    ctx.lineTo(Width, i);
                    ctx.stroke();
                }
                for (i = 0; i < Width; i += GridSize) {
                    ctx.moveTo(i, 0);
                    ctx.lineTo(i, Height);
                    ctx.stroke();
                }
            }
        }
        function changeColor() {
            var e = document.getElementById("ddlcolor");
            var _color = e.options[e.selectedIndex].value;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            gridOptions.color = _color;
            ctx.strokeStyle = _color;
            ctx.stroke();
        }
        function changeSize() {
            var e = document.getElementById("ddlSize");
            var _size = e.options[e.selectedIndex].value;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            gridOptions.LinesSize = _size;
            ctx.lineWidth = _size;
            ctx.stroke();
        }
        function changeGridSpace() {
            var e = document.getElementById("ddlSpace");
            var _gridsize = e.options[e.selectedIndex].value;
            canvas.width = canvas.width;
            gridOptions.GridSize = _gridsize;
            displayImage();
        }		
    </script>
 
</head>
<body onload="displayGrid()">
    <canvas id="myCanvas" width="600px" height="330px">
    </canvas>
    <br />
    Choose color:
    <select id="ddlcolor" onchange="changeColor()">
        <option value="#f2f2f2">#f2f2f2</option>
        <option value="#000">#000 </option>
    </select>
    Thickness of the lines:
    <select id="ddlSize" onchange="changeSize()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    Grid Lines space:
    <select id="ddlSpace" onchange="changeGridSpace()">
        <option value="15">15</option>
        <option value="10">10</option>
        <option value="5">5</option>
    </select>
</body>
</html>

The example starts with the function displayGrid() to draw the initial grid lines. The example uses the lineTo(x,y) method in the loop to draw the lines. There are three event procedure to change the color, thickness and space between grid lines: changeColor(), changeSize() and changeGridSpace().

Notable points:

I am using two methods to clear the canvas: context.clearRect() method to reset the color and thickness of the lines and canvas.width = canvas.width to reset the interval between the lines.

context.clearRect() clears the drawing objects on the canvas but not the context states, fillstyle and strokeStyle so I need only to set the strokeStyle to change the color and thickness. But to change the pixel interval between lines we need to clear the all canvas state so I use the canvas.width property.

Setting the canvas clears all canvas state including the transformation matrix, clipping region and all drawing styles like as strokeStyle, fillStyle, globalAlpha and lineWidth etc.

  • Dan Radic

    This is good.

  • TarlisM

    I would like to see how to do it in the index.css file

  • lena payne

    i would like to see instead of using lines i want to see it in dots….?