How to draw a grid using HTML5 and canvas or SVG?

In the example given below, we first define the width and height of the grid. Then we define the size of the canvas and draw the grid onto the 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 = $(&#39;<canvas/>&#39;).attr({width: canvas_w, height: canvas_h}).appendTo(&#39;body&#39;);
var ctx = canvas.get(0).getContext("2d");

This is our approach −

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

The above is the detailed content of How to draw a grid using HTML5 and canvas or SVG?. For more information, please follow other related articles on the PHP Chinese website!