How to clear the canvas without interrupting animations?

I am visualising flight paths with D3 and Canvas. In short, I have data for each flight's origin and destination as well as the airport coordinates. The ideal end state is to have an indiviudal circle representing a plane moving along each flight path from origin to destination. The current state is that each circle gets visualised along the path, yet the removal of the previous circle along the line does not work as clearRect gets called nearly constantly.

Current state:

Ideal state (achieved with SVG):

The Concept

Conceptually, an SVG path for each flight is produced in memory using D3's custom interpolation with path.getTotalLength() and path.getPointAtLength() to move the circle along the path.

The interpolator returns the points along the path at any given time of the transition. A simple drawing function takes these points and draws the circle.

Key functions

The visualisation gets kicked off with:

od_pairs.forEach(function(el, i) {
  fly(el[0], el[1]); // for example: fly('LHR', 'JFK')
});

The fly() function creates the SVG path in memory and a D3 selection of a circle (the 'plane') - also in memory.

function fly(origin, destination) {

  var pathElement = document.createElementNS(d3.namespaces.svg, 'path');

  var routeInMemory = d3.select(pathElement)
    .datum({
      type: 'LineString', 
      coordinates: [airportMap[origin], airportMap[destination]]
    })
    .attr('d', path);

  var plane = custom.append('plane');

  transition(plane, routeInMemory.node());

}

The plane gets transitioned along the path by the custom interpolater in the delta() function:

function transition(plane, route) {

  var l = route.getTotalLength();
  plane.transition()
      .duration(l * 50)
      .attrTween('pointCoordinates', delta(plane, route))
      // .on('end', function() { transition(plane, route); });

}

function delta(plane, path) {

  var l = path.getTotalLength();
  return function(i) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      draw([p.x, p.y]);
    };
  };

}

... which calls the simple draw() function

function draw(coords) {

  // contextPlane.clearRect(0, 0, width, height);         << how to tame this?

  contextPlane.beginPath();
  contextPlane.arc(coords[0], coords[1], 1, 0, 2*Math.PI);
  contextPlane.fillStyle = 'tomato';
  contextPlane.fill();

}

This results in an extending 'path' of circles as the circles get drawn yet not removed as shown in the first gif above.

Full code here: http://blockbuilder.org/larsvers/8e25c39921ca746df0c8995cce20d1a6

My question is, how can I achieve to draw only a single, current circle while the previous circle gets removed without interrupting other circles being drawn on the same canvas?

Some failed attempts:

• The natural answer is of course context.clearRect(), however, as there's a time delay (roughly a milisecond+) for each circle to be drawn as it needs to get through the function pipeline clearRect gets fired almost constantly.
• I tried to tame the perpetual clearing of the canvas by calling clearRect only at certain intervals (Date.now() % 10 === 0 or the like) but that leads to no good either.
• Another thought was to calculate the previous circle's position and remove the area specifically with a small and specific clearRect definition within each draw() function.

Any pointers very much appreciated.