How to refresh canvas by click in vue.js?

Member

by lew , in category: Javascript , 4 months ago

How to refresh canvas by click in vue.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by haylee.mertz , 4 months ago

@lew 

To refresh a canvas by click in Vue.js, you can create a method in your Vue component that handles the click event and redraws the canvas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div>
    <canvas ref="canvas"></canvas>
    <button @click="refreshCanvas">Refresh Canvas</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    
    // draw initial canvas content here
    this.ctx.fillStyle = 'red';
    this.ctx.fillRect(10, 10, 50, 50);
  },
  methods: {
    refreshCanvas() {
      // clear the canvas
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

      // draw new content
      this.ctx.fillStyle = 'blue';
      this.ctx.fillRect(30, 30, 50, 50);
    }
  }
};
</script>


In this example, we have a canvas element and a button in the template. When the button is clicked, the refreshCanvas method is called, which clears the canvas using clearRect and then draws new content using fillRect.


Make sure to replace the initial canvas drawing code with your actual drawing logic.