How can i draw geojson maps on gridlayer use canvas? - leaflet

Question

I have already know how to draw map on leaflet tilelayer, but I'm trying to have a better efficiency, so now I practicing canvas with leaflet gridlayer,but the outcome wasn't I expected.I have no idea how to do it, hope someone can help me! Thanks!
Here's my code below:
var tiles = new L.GridLayer();
tiles.createTile = function (coords) {
var tile = L.DomUtil.create('canvas', 'leaflet-tile');
var ctx = tile.getContext('2d');
var size = this.getTileSize()
tile.width = size.x
tile.height = size.y
console.log(size.x);
// 将切片号乘以切片分辨率，默认为256pixel,得到切片左上角的绝对像素坐标
var nwPoint = coords.scaleBy(size)
// 根据绝对像素坐标，以及缩放层级，反投影得到其经纬度
var nw = map.unproject(nwPoint, coords.z)
//从该切片左上角开始画，画一个切片大小的无填充矩形
ctx.strokeRect(nwPoint.x, nwPoint.y, size.x, size.y)
ctx.fillStyle = 'black';
//x,y,z显示
ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 50, 60);
//经纬度坐标
if(nw.lng<121 && nw.lng>119){
ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 50, 80);
}
console.log(nw);
//线的颜色
ctx.strokeStyle = 'black';
//这是canvans的方法
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(size.x - 1, 0);
ctx.lineTo(size.x - 1, size.y - 1);
ctx.lineTo(0, size.y - 1);
ctx.closePath();
ctx.stroke();
// //
for (i in da.paths) {//svg casnvas
//console.log(da.paths[i].path);
context = da.paths[i].path;
p = new Path2D(context);
// console.log(p);
ctx.stroke(p);
ctx.fill(p);
ctx.fillStyle = 'lightpink';
}
return tile;
}
tiles.addTo(map)
Like this:
I really hope my map can fit the base map,
like this:
It is only a concept map, thank you!