Distort image to arc path with paper.js

Question

I have just started learning paper.js and I am trying to make a raster image "curve" around a vector path. I tried very different techniques (with or without react in the exemple down there) but I cannot seem to manage to do this effect.

Does anyone know how to achieve this?

Thanks a lot!

const svg = document.getElementById('sample-text');
paper.setup(myCanvas.current);
paper.project.importSVG(svg, function(item) {
  svg.style.display = 'none';

  const from = new Point(30, 70);
  const through = new Point(45, 100);
  const to = new Point(200, 70);

  const path = new Path.Arc(from, through, to);
  path.strokeColor = 'black';
  path.strokeWidth = 10;
});

view.draw();

paper.install(window);
window.onload = function () {
  paper.setup('myCanvas');

  var path = new Path();
  path.strokeColor = 'black';
  path.add(new Point(100, 200));
  path.add(new Point(200, 100));
  path.add(new Point(300, 200));

  var raster = new Raster('https://static.vecteezy.com/system/resources/thumbnails/011/946/707/small/chill-text-hand-drawn-illustration-for-stickers-free-png.png');
  raster.position = new Point(200, 200);

  var step = 5; // Adjust this value for smoother/faster alignment
  function alignImageAlongPath() {
    for (var i = 0; i < path.length; i += step) {
      var point = path.getPointAt(i % path.length);
      var normal = path.getNormalAt(i % path.length);
      var tangent = path.getTangentAt(i % path.length);
      raster.position = point + normal * (raster.height / 2);
      raster.rotation = tangent.angle;
      paper.view.draw();
    }
  }
  alignImageAlongPath();

  paper.view.draw();
};