नीचे दिए गए उदाहरण में, हमने पहले ग्रिड की चौड़ाई और ऊंचाई को परिभाषित किया है। फिर हम कैनवास के आकार को परिभाषित कर रहे हैं और एक कैनवास में खींचे गए कमरबंद।
//हम ग्रिड की चौड़ाई और ऊंचाई निर्धारित कर रहे हैंvar grid_w =200;var grid_h =200;//हम gridvar gridp =15 के आसपास पैडिंग सेट कर रहे हैं;//हम इसकी चौड़ाई और ऊंचाई को परिभाषित करके कैनवास के आकार को परिभाषित कर रहे हैंvar कैनवास_w =grid_w + (gridp*2) + 1;var कैनवास_h =grid_h + (gridp*2) + 1;var कैनवास =$('<कैनवास/>').attr ({चौड़ाई:कैनवास_डब्ल्यू, ऊंचाई:कैनवास_एच})। संलग्न करें ('बॉडी');var ctx =कैनवास.गेट(0).getContext("2d"); यह रहा हमारा तरीका -
फ़ंक्शन ड्राबोर्ड (){ के लिए (var a =0; a <=grid_w; a +=50) { ctx.moveTo(0.5 + a + gridp, gridp); ctx.lineTo(0.5 + a+ gridp, grid_h + gridp); }