Vue.js Элемент Canvas следует за мышью

Question

Я сделал палитру цветов в Vue на основе HTML-холста и хочу добавить прозрачный круг, показывающий активный цвет на палитре цветов, который будет следовать за мышью на холсте.

Я пытался изменить этот код для моего использования: Сделать "шар", следуя за мышью на холсте , и вот что я получил:

Как видите, мой круг следует за позицией мыши, но оставляет след. Положение мыши динамически обновляется до состояния, и данные XY в моей функции извлекаются из состояния.

loop(X, Y) {
   this.moveCursor(X, Y)
   requestAnimationFrame(this.loop)
},
moveCursor(X, Y) {
   const colorPickerBlock = document.getElementById('color_picker-block');
   const blockCtx = colorPickerBlock.getContext('2d');

   blockCtx.beginPath();
   blockCtx.arc(X, Y, 6, 0, 2 * Math.PI);
   blockCtx.fillStyle = "transparent";
   blockCtx.fill();
   blockCtx.lineWidth = 1;
   blockCtx.strokeStyle = "white";
   blockCtx.stroke();                
   },
mousedown(event) {
   this.isDragActive = true;
},
mousemove(event) {
  if (this.isDragActive) {
        this.changeLocalColor(event)
        this.loop(this.getActiveElementColor.X, this.getActiveElementColor.Y)
 }
},
mouseup(event) {
   if (this.isDragActive) {
        this.isDragActive = false;
   }
}