How do I draw in a Canvas with Leaflet 1.9?

Question

I am beginning with Leaflet 1.9.2, and so far I was able to draw a tiled map with some markers and polylines on top of the map.

Now I'd like to draw animated custom vector shapes on my map like in this cool demo. The canvas class seems like a good place to start, but for the life of me, I could not find any (recent and simple) examples of how to use it. There are some old code pieces based on Leaflet 0.7, at a time when it probably did not provide the feature. I also looked at some plug-ins for inspiration, but they are usually too sophisticated to be helpful and/or do not extend the Canvas class and re-implement a lot of methods, which seems weird.

Any pointers?

Answer 1

Keeping digging in SE, documents and testing code, I understood one important thing, thanks to this first answer in SE and this other question on SE: the Leaflet Canvas class is NOT intended to perform custom canvas-like drawing for users. This is why it is not documented in details. A couple of explanation lines in there would have avoided me to go on the wrong track for an entire day, I suppose this is part of the Leaflet learning curve :-)

I did find a (simple) solution though, thanks to this small L.CanvasLayer class that was referenced in the second SE question. Here is an extract of my test code. I draw a simple circle in 2D at (100,100) and I do not use the map projection (yet), but of course I plan to use more sophisticated shapes and tie them to the map - which was out of the scope of this question.

const MyCanvasLayer = L.CanvasLayer.extend({
    onDrawLayer: function (info) {
        var ctx = info.canvas.getContext('2d');
        ctx.fillStyle = "rgba(255,116,0, 0.8)";
        ctx.beginPath();
        ctx.arc(100, 100, 10, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
    }
});
const myCanvasLayer = new MyCanvasLayer();
myCanvasLayer.addTo(map);

EDIT: as I am learning Leaflet, I am discovering alternate solutions. Drawing directly in a Canvas is not a silver bullet because you get artefacts when zooming or panning, so you have to write code to compensate for these - especially if you have some animation going on. The more it goes, the more I think that the SVGOverlay is an easier solution. It allows you to draw vector shapes of any kind. CSS can be used to style them, which is convenient. SVG shapes can be built programmatically, as demonstrated in the Leaflet doc. And they are well integrated in the Leaflet ecosystem. Since I am not going to have too many of them, this seems like an easier and faster path.