Передвижение картинок по произвольной кривой
 

Подскажите, пожалуйста, как организовать движение картинок по path "паровозиком", как угодно, только не друг на друге (задать координаты в цикле не получилось, не могу понять как это сделать..). Фрагмент кода:

var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');

    var W = window.innerWidth,
         H = window.innerHeight;
    canvas.width  = W;
    canvas.height = H;

    var angle = 0;
   
    var currentAngle = 0;
    var TO_RADIANS = Math.PI / 180;
    var particles = [];
    

    var counter = 0;
    var svg = document.getElementById("k9");// path из svg
    var straightLength = svg.getTotalLength();

    function Particle() {

    this.radius = 20;

       this.x = svg.getPointAtLength(straightLength).x;
       this.y = svg.getPointAtLength(straightLength).y;

    this.move = function() {

      for ( var g = 0; g < particles.length; g++){

        this.x = svg.getPointAtLength(counter*straightLength).x;
        this.y = svg.getPointAtLength(counter*straightLength).y;

    }
    counter+=0.0003;//  так картинки передвигаются по path друг на друге, как организовать нечто вроде "паровозика"? Перебрал много вариантов в цикле, но ничего не вышло..


        context.beginPath();
        context.globalCompositeOperation = "source-over";

        context.save();
        context.translate(this.x, this.y);
        context.rotate(Gangle * TO_RADIANS);
        var image = new Image();
        image.src = 'img/bag.png';
        context.drawImage(image,20, -20, 40, 40);
        context.restore();
        angle+=0.1;


    }
    };


    for (var i = 0; i < 10; i++) {
      var particle = new Particle();
        particles.push(particle);
    }

    function animate() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < particles.length; i++) {
        particles[i].move();

    }
      requestAnimFrame(animate);
    }
    animate();