Syntax error How to draw grid using HTML5 and canvas or SVG?

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);
   }
Updated on: 2020-06-24T13:43:08+05:30

649 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements