change size of drawing marker relative to the speed of the cursor – Javascript

I have made a marker that draws when the mouse click is held down. I now want to change the size of this marker relative to the speed of the cursor. My code is as follows :

class App {
  constructor(event, x) {
    this.container = this.createContainer();
    this.canvas = this.createCanvas();
    this.ctx = this.canvas.getContext("2d");
    this.addEventListeners();
    this.isDrawing = this.letDrawing();
      }

  createContainer = () => {
    const container = document.createElement("div");
    container.className = "app-container";
    document.body.appendChild(container);
    return container;
  };

  createCanvas = () => {
    const canvas = document.createElement("canvas");
    canvas.className = "app-canvas";
    this.container.appendChild(canvas);
    canvas.width = this.container.getBoundingClientRect().width;
    canvas.height = this.container.getBoundingClientRect().height;
    return canvas;
  };

  addEventListeners = () => {
    this.canvas.addEventListener("mousemove", this.onMouseMove);
    this.canvas.addEventListener("mousedown", this.onMouseDown);
    document.addEventListener("mouseup", this.onMouseUp);
  };

  letDrawing = () => {
    this.isDrawing = false;
  };

  onMouseDown = () => {
    this.isDrawing = true;
  };

  onMouseMove = (event) => {
    if (this.isDrawing === true) {
      this.drawBall(event.x, event.y);
  
    }
  };

  onMouseUp = () => {
    this.isDrawing = false;
  };

  drawBall = (x, y) => {
    this.ctx.beginPath();
    this.ctx.arc(x, y, 0, Math.PI * 2);
    this.ctx.fillStyle = "#6f0ecf";
    this.ctx.fill();
    this.ctx.closePath();
  };
}
export { App };

I was thinking of using previous position of X and Y, and doing something like below… Can I use deltaX in this scenario?
Any help on how to do this would be much appreciated!!

  onMouseMove = (event) => {
    if (this.isDrawing === true) {
      this.drawBall(event.x, event.y);
      this.previousX = this.currentX;
      this.currentX = event.x;
      distance = this.currentX - this.previousX;
   
    }
  };
  onMouseMoveSpeed = () => {
    const size = speed * 10 + 10;
  };

  onMouseUp = () => {
    this.isDrawing = false;
  };

  drawBall = (x, y, size) => {
    this.ctx.beginPath();
    this.ctx.arc(x, y, size, 0, Math.PI * 2);
    this.ctx.fillStyle = "#6f0ecf";
    this.ctx.fill();
    this.ctx.closePath();
  };