Renderer pane option is ignored on canvas renderer

[فرزاد]

Issue Description:

When defining a renderer for the curve, which has a pane defined, pane is ignored and each curve creates a canvas for itself and makes the page very heavy and irresponsible.

Steps to reproduce:

1. Create a pane.
2. Create a canvas renderer for the pane.
3. Create high number of curves with the renderer

map.createPane("customPane");
var canvasRenderer = L.canvas({pane:"customPane"});
var pathOptions = {
                renderer: canvasRenderer 
            };
var path = 
            ['M', [50.14874640066278, 14.106445312500002],
                'Q', [51.67255514839676, 16.303710937500004],
                [50.14874640066278, 18.676757812500004],
                'T', [49.866316729538674, 25.0927734375]];
for (var i = 0; i < 500; i += 1) {
	var curvedPath = L.curve(path, pathOptions);
	curvedPath.addTo(map);
}

Version

Leaflet 1.7.1

[elfalem]

Thanks for the bug report and detailed reproduction steps. I have not yet gotten a chance to investigate but will do so when possible.

[elfalem]

To give an update, I've been able to confirm the issue. It looks like each curve was creating it's own canvas for isolation. This is because animating becomes challenging with multiple curves on the same canvas. But as noted, having multiple canvases also has its own issues. I'm working on getting animations to work reliably on a single canvas.

[elfalem]

@mobinseven I've just released version 0.7.0 which I believe resolves this issue. Please let me know if you can confirm.

[فرزاد]

@elfalem Yes, I tested the snippet and they all rendered on a single canvas. Thanks!