Canvas
Quick answer
L.canvas creates a renderer that draws every vector layer into one canvas element covering the viewport, so thousands of simple points produce a constant number of DOM nodes. Use it through the renderer option on paths or the map's preferCanvas flag when symbol counts are high and styling stays simple.
L.canvas( options ) → Canvas
Key points
- Raise options.tolerance to 3-5 pixels so thin strokes and rings stay clickable.
- options.padding extends the canvas beyond the viewport to reduce redraws while dragging.
- Pass one renderer instance to every L.circleMarker so they share a single canvas.
Example
var canvas = L.canvas({ padding: 0.2, tolerance: 4 });
/* 3000 个随机点，全部画进同一张画布 */
var pts = [];
for (var i = 0; i < 3000; i++) {
pts.push([
39.85 + Math.random() * 0.10,
116.32 + Math.random() * 0.16
]);
}
var group = L.layerGroup(pts.map(function (p) {
return L.circleMarker(p, {
renderer: canvas,
radius: 3,
weight: 1,
color: '#ffffff',
fillColor: '#1f5fd0',
fillOpacity: 0.8
});
})).addTo(map);
/* 点击命中仍按要素判断，e.layer 是对应的 circleMarker */
group.on('click', function (e) {
console.log(L.Util.stamp(e.layer));
});Notes
- CSS classes, filters and per-feature shadows stop working because canvas has no per-feature DOM.
- Draw order is fixed inside one canvas surface, so reorder shapes with bringToFront instead.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Canvas. https://www.jingweizhi.com/en/leaflet/api/canvas.html (accessed 2026-11-03).