Leaflet tileLayer canvas，缩放时重叠画布不透明度

Question

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

这就是它的样子：

http://codepen.io/anon/pen/epvJVJ?editors=101

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);

问题是每当我滚动时，都会绘制新画布并在旧画布移除之前将旧画布重叠一会儿。有什么方法可以让它变得更顺畅吗？或者是否可以制作类似反向标记的东西来为除指定区域之外的所有内容着色？

提前致谢。