[Vuejs]-How to refresh canvas by click in VueJS?

by

0👍

✅

You can have a method in vue that clears the canvas

so instead of:

clearCanvas() {
 this.$forceUpdate(this.currentMouse);
},

You need to access your reference of the context and call it like below:

clearCanvas () {
  this.context.clearRect(0, 0, canvas.width, canvas.height)
}

You can create a null variable inside of Vue data

data: () => ({
    mouse: {
        current: {
            x: 0,
            y: 0
        },
        previous: {
            x: 0,
            y: 0
        },
        down: false
    },

    canvas_width: '',
    canvas_height: '',

    modal_state: false,
    context: null
})

and then on your ready function set the context to the reference you created for the canvas:

ready: function () {
    let c = document.getElementById("canvas");
    this.context = c.getContext("2d");
    this.context.translate(0.5, 0.5);
    this.context.imageSmoothingEnabled = false;
}

I would also suggest to change the ready function to the mounted VueJS lifecycle hook, that basicly fires when your document is ready.

Hope it helps

0👍

Here’s a simple solution:

clear() {
      this.context.clearRect(0, 0, 200, 200);
      this.context.beginPath();
      this.context.closePath();
    }

Leave a comment