Vue.js Canvas element follow mouse

Question

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.

I tried to change this code to my usage: Make "ball" follow mouse on canvas , and this is what I got:

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.

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;
   }
}

score 1 · Answer 1 · answered Nov 21 '19 at 09:37

You have to reset state of canvas to initial before moveCursor. I dont know if canvas is only used to show circle or also to show color pallete. If canvas shows only circles then you need to

context.clearRect(0, 0, canvas.width, canvas.height);

otherwise you need to also draw whole palette again.

resetPalette ()
{
    this.context.clearRect(0, 0, canvas.width, canvas.height);
    // steps to init palette from the start
}

I would also suggest to assign context as variable rather than getting it each time.

Vue.js Canvas element follow mouse

1 Answers1