Leaflet canvas remove() bug

[louMoxy]

I am removing a canvas map using map.remove() and creating a new canvas map and I am getting the error:
Uncaught TypeError: Cannot read property 'clearRect' of undefined

I have created a codepen to show the issue, just uncomment the mymap.remove(); and comment out the setTimeout and you will see the error.
https://codepen.io/moxy/pen/QaeKdp

const mapId = document.getElementById("leaflet");
const removeButton = document.getElementById("remove");

var mymap = L.map(mapId, {
  renderer: L.canvas(),
  layers: [
		new L.TileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
		})
	]
}).setView([51.505, -0.09], 13);

var circle = L.circle([51.508, -0.11], {
  color: "red",
  fillColor: "#f03",
  fillOpacity: 0.5,
  radius: 500
}).addTo(mymap);

// setTimeout(() => mymap.remove(), 10); // Works as expected
mymap.remove();  // Throws an error
//removeButton.addEventListener("click", function(event) {
//  mymap.remove(); // Works as expected
// });

[IvanSanchez]

This is a race condition. What normally goes on here is that a canvas renderer triggers a requestAnimationFrame over at

Leaflet/src/layer/vector/Canvas.js

Line 202 in 510c3e7

this._redrawRequest = this._redrawRequest || Util.requestAnimFrame(this._redraw, this);

, so that everything is drawn during the next frame.

In this case, the map (or the canvas renderer) is removed during that request for the animation frame, so the delayed call to _redraw is trying to get the drawing context, which has already been destroyed.

There are several approaches to this, but I feel that the cleanest is to call Util.cancelAnimFrame (this._requestRedraw) in L.Canvas._destroyContainer, next to

Leaflet/src/layer/vector/Canvas.js

Line 71 in 510c3e7

delete this._ctx;

This bug seems that can be triggered programatically, so if anybody wants to fix this, I encourage to do Test-Driven Development for this one. Add a unit test over at https://github.com/Leaflet/Leaflet/blob/master/spec/suites/layer/vector/CanvasSpec.js , make sure it fails with the same error message, then fix the bug, then check if the tests pass.