Make particles shooting out at a random angle in HTML5 canvas

See more:

HTML5

Canvas

I'm trying to make a game in HTML5 Canvas. In the game, I try to make particles shoot out of under the player at random angles, but I can't get it done. Here is what I tried:

What I have tried:

class Practicals {
  constructor() {
    this.x = player.x + 20;
    this.y = player.y + 25;
    this.height = Math.round(10 + Math.random() * 10);
    this.width = 4;
    this.vy = -10;
    this.vx = 10;
    this.rotation = 30;
  }

  draw() {
    context.fillRect(this.x, this.y, this.width, this.height);
  }

  update(secondsPassed) {
    this.y += this.vy * secondsPassed;
    this.x += this.vx * secondsPassed;
    this.y += 10;
  }

}

function handelPracticals(secondsPassed) {
  practicals.unshift(new Practicals());
  for (let i = 0; i < practicals.length; i++) {
    practicals[i].update(secondsPassed);
    context.save();
    context.translate(
      practicals[i].x + practicals[i].width / 2,
      practicals[i].y + practicals[i].height / 2
    );
    context.rotate((Math.PI / 360) * Math.round(Math.random() * 10) * 10);
    context.translate(
      -practicals[i].x - practicals[i].width / 2,
      -practicals[i].y - practicals[i].height / 2
    );
    practicals[i].draw();
    context.restore();
  }

  if (practicals.length > 200) {
    for (let i = 0; i < 20; i++) {
      practicals.pop(practicals[i]);
    }
  }
}

Thank you in advance