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 = $('<canvas/>').attr({width: canvas_w, height: canvas_h}).appendTo('body'); 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!