HTML5와 캔버스 또는 SVG를 사용하여 그리드를 그리는 방법은 무엇입니까?

아래 주어진 예에서 먼저 그리드의 너비와 높이를 정의했습니다. 그런 다음 캔버스의 크기를 정의하고 캔버스에 띠를 그립니다.

//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");

여기에 우리의 방법이 있습니다 -

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