নীচের উদাহরণে, আমরা প্রথমে গ্রিডের প্রস্থ এবং উচ্চতা সংজ্ঞায়িত করেছি। তারপরে আমরা ক্যানভাসের আকার নির্ধারণ করছি এবং একটি ক্যানভাসে টানা গার্ড।
//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);
} 