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?

  • Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code. You write "I'd like to draw animated custom vector shapes on my map" and already decided that "he canvas class seems like a good place to start". How do you know that? What are these custom shapes? How are they tied to geographical position?
    – TomazicM
    Dec 4, 2022 at 14:53
  • Hello @TomazicM: thank you very much for your advises. I am aware of the site policy, and I would love to provide sample code but I have a chicken and egg problem here. About what I am trying to accomplish, I gave the link to the cartodb.github.io/Leaflet.CanvasLayer/example.html demo, which shows an animated circle. I know that this can be done only with the canvas approach. Tying my vector elements a geographical position is outside the scope of my question, I know how to do this. This is why I did not mention it, to avoid noise. Thanks!
    – user216155
    Dec 4, 2022 at 16:39
  • As far as code is concerned, you can add code of doing whatever you want to do without animation and then describe what kind of animation you wand/need.
    – TomazicM
    Dec 4, 2022 at 17:28
  • Another question: if your vector shape would be a circle, once displayed would it behave like L.circle or like L.circleMarker? Meaning would it change size with zoom or not?
    – TomazicM
    Dec 4, 2022 at 17:56
  • I found what I was looking for, see my answer below. Again, I really appreciate the time you took to help me, thanks again
    – user216155
    Dec 4, 2022 at 18:29

1 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.arc(100, 100, 10, 0, Math.PI * 2);
const myCanvasLayer = new MyCanvasLayer();

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.

  • So this means L.circleMarker then, not L.circle.
    – TomazicM
    Dec 4, 2022 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy