title: Vue.js Canvas element follow mouse
body: <p>I made color picker in Vue, basing on HTML canvas and I want to add transparent circle showing active color on color picker, that will follow mouse on canvas. </p>
  
  <p>I tried to change this code to my usage: <a href="https://stackoverflow.com/questions/46292350/make-ball-follow-mouse-on-canvas">Make &quot;ball&quot; follow mouse on canvas</a> , and this is what I got: </p>
  
  <p><a href="https://i.stack.imgur.com/wH7ak.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wH7ak.png" alt="enter image description here"></a></p>
  
  <p>As You can see, my circle is following mouse position, but leaves trace. Mouse position is updated dynamically to state and X Y data in my function is recived from state. </p>
  
  <pre><code>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;
     }
  }
  </code></pre>