How to draw grid using HTML5 and canvas or SVG?

In the below given example, we have first defined the width and height of the grid. Then we are defining the size of canvas and drawn gird into a canvas.

//we are setting the grid width and height var grid_w = 200; var grid_h = 200; //we are setting padding around grid var gridp = 15; //we are defining size of canvas by defining its width and height var canvas_w = grid_w + (gridp*2) + 1; var canvas_h = grid_h + (gridp*2) + 1; var canvas = $('<canvas/>').attr({width: canvas_w, height: canvas_h}).appendTo('body'); var ctx = canvas.get(0).getContext("2d");

Here is our method −

function drawBoard(){    for (var a = 0; a <= grid_w; a += 50) {       ctx.moveTo(0.5 + a + gridp, gridp);       ctx.lineTo(0.5 + a+ gridp, grid_h + gridp);    }