Canvas - Animating a rotation of an Arc(canvas-sketch Javascript)

Question

I'm having difficulty animating the arc that I draw in a way that I'd want (basically the arc just circling around the centre). What's happening instead is that where I have the first startAngle then the line is always there and the circle is only increasing.

I tried to animate it first by changing the Start and End angle (I think that did not work at all). And then I am trying to do it with rotation only, but that works as described above, not the way I'd expect. And I'm stuck on this for a month now... :)

1 have one Arc class, 3 methods update() - to change the rotation angle [does not need a separate method I guess, but hey, why not) drawUpdate() - to draw the circles

Any help will be appreciated.

I'm using canvas-sketch library for some simplifications but otherwise it's the same as any HTML5-Canvas.

Video: https://vimeo.com/741551006

The code's below

const canvasSketch = require('canvas-sketch');
const math = require('canvas-sketch-util/math');
const random = require('canvas-sketch-util/random');

// TODO:
// - Create a moving arcs
//    - Create a class from arc drawing.

const settings = {
  dimensions: [ 1080, 1080 ],
  animate: true
};

const sketch = ({context, width, height}) => {
  const arcs = [];
  const num = 3;
  const cy = height * 0.5;
  const cx = width * 0.5;

  context.fillStyle = 'white';
  context.fillRect(0, 0, width, height);

  context.fillStyle = 'black';

  const w = width  * 0.01;
  const h = height * 0.1;
  let x, y;

  const radius = width * 0.3;

  for (let i = 0; i < num; i++) {
    arcs.push(new Arcs(width, height));

    const slice = math.degToRad(360 / num);
    const angle = slice * i;

    x = cx + radius * Math.sin(angle);
    y = cy + radius * Math.cos(angle);

    // Drawing the lines
    context.save();
    context.translate(x, y);
    context.rotate(-angle);
    context.scale(random.range(1, 2), random.range(1,2));

    context.beginPath();
    context.rect(-w * 0.5, random.range(0, -h * 0.5), w, h);
    context.fill();
    context.restore();

    // Drawing the Arcsw
    // arcs[i].drawUpdate(context);
  }


  return ({ context, width, height }) => {

    arcs.forEach((arc, i) => {
      // console.log("forEach")
      arc.update()
      arc.drawUpdate(context)
    });



  };
};

canvasSketch(sketch, settings);

class Arcs {
  constructor(width, height){
    this.width = width;
    this.height = height;

    this.cx = width * 0.5;
    this.cy = height * 0.5;
    this.rotationAngle = 0;
    // this.lineWidth = lineWidth;
    // this.slice = slice;

    this.radius =  width * 0.3;
    this.lineWidth = random.range(5, 10);

    this.radius = width * 0.3 * random.range(1, 2);
    this.angleStart = random.range(math.degToRad(0), math.degToRad(360));
    this.angleEnd = random.range(math.degToRad(0), math.degToRad(360));
  }

  drawUpdate(context){
    // console.log("drawUpdate()");
    context.save();
    context.translate(this.cx, this.cy);
    context.rotate(this.rotationAngle);

    context.lineWidth = this.lineWidth

    context.beginPath();
    context.arc(0, 0,
      this.radius,
      this.angleStart,
      this.angleEnd);
    context.stroke();

    // console.log("angleStart " + this.angleStart);
    // console.log("angleEnd " + this.angleEnd);

    context.restore();

  }

  update(){
    this.rotationAngle += math.degToRad(0.1);    
  }
}