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);
   }