Javascript 传单tileLayer画布，缩放时重叠画布不透明度

我想让地图变暗，并使感兴趣点周围的区域变亮，我正在使用传单的tileLayer.canvas

这就是它看起来的样子：

var中心=L.latLng（51.505，-0.09）；
var map=L.map（'map'）.setView（[51.505，-0.09]，13）；
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'；
var osmAttrib=‘地图数据©贡献者’；
L.tileLayer（osmUrl，{归属：osmAttrib}）.addTo（地图）；
var tiles=L.tileLayer.canvas（）；
函数变暗（）{
tiles.drawTile=函数（画布、平铺、缩放）{
var context=canvas.getContext（'2d'）；
var tileSize=this.options.tileSize；
var点=中心；
var start=tile.multiplyBy（tileSize）；
var p=地图项目（点）；
var x=数学轮（p.x-start.x）；
变量y=数学轮（p.y-start.y）；
var半径=20；
rect（0，0，canvas.width，canvas.height）；
context.fillStyle='rgba（0,0,0,5）'；
context.fill（）；
context.save（）；
context.beginPath（）；
弧（x，y，半径，0，2*Math.PI）；
clip（）；
clearRect（0，0，canvas.width，canvas.height）；
restore（）；
}
};
变暗（）；
地图。添加图层（瓷砖）；

问题是每当我滚动时，新画布就会被绘制出来，并在旧画布被移除之前与旧画布重叠一段时间。有没有办法让事情变得更顺利？或者，有没有可能制作一个像反向标记一样的东西，为除指定区域以外的所有区域着色

提前谢谢

var center = L.latLng(51.505, -0.09);

var map = L.map('map').setView([51.505, -0.09], 13);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';

L.tileLayer(osmUrl, { attribution: osmAttrib }).addTo(map);

var tiles = L.tileLayer.canvas();


function darken() {
  tiles.drawTile = function (canvas, tile, zoom) {
    var context = canvas.getContext('2d');

    var tileSize = this.options.tileSize;
    var point = center;
    var start = tile.multiplyBy(tileSize);
    var p = map.project(point);

    var x = Math.round(p.x - start.x);
    var y = Math.round(p.y - start.y);

    var radius = 20;

    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = 'rgba(0,0,0,.5)';
    context.fill();
    context.save();
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI);
    context.clip();
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.restore();
  }
};

darken();
map.addLayer(tiles);