Edit in JSFiddle

$(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");
});

<canvas id="myCanvas" width="500" height="500">
    <p>Canvas not supported.</p>
</canvas>

*
{
    margin: 0; padding: 0;
}

html, body
{
    height: 100%; width: 100%;
}
canvas
{
    display: block;
}