VueJS How can I clear the canvas?

Question

When I press the button, I want to clear the canvas. how can I do that ? can you help me. please. I tried it a few times but I couldn't. template and vuejs codes below. I would be glad if you help me. thank you.

Html

<template>
  <div>
    <canvas id="myCanvas" width="560" height="360" @mousedown="beginDrawing" @mousemove="keepDrawing" @mouseup="stopDrawing"/>
    <button @click="resetcanvas">Reset Canvas</button>
  </div>
</template>

Vuejs

<script>
export default  {
 data: {
    x: 0,
    y: 0,
    isDrawing: false,
    canvas: null,
  },
  methods: {
    drawLine(x1, y1, x2, y2) {
      let ctx = this.canvas;
      ctx.beginPath();
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 1;
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
      ctx.closePath();
    },
    beginDrawing(e) {
      this.x = e.offsetX;
      this.y = e.offsetY;
      this.isDrawing = true;
    },
    keepDrawing(e) {
      if (this.isDrawing === true) {
        this.drawLine(this.x, this.y, e.offsetX, e.offsetY);
        this.x = e.offsetX;
        this.y = e.offsetY;
      }
    },
    stopDrawing(e) {
      if (this.isDrawing === true) {
        this.drawLine(this.x, this.y, e.offsetX, e.offsetY);
        this.x = 0;
        this.y = 0;
        this.isDrawing = false;
      }
    }
 
  },
  mounted() {
    var c = document.getElementById("myCanvas");
    this.canvas = c.getContext('2d');
  }
}
</script>

Your `@click` event is being sent to `resetcanvas()`, a function which doesn't exist in your code. Are you asking how to write that function? — SoyChai, Mar 15 '21 at 13:45
[CanvasRenderingContext2D.clearRect()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect) — Tim, Mar 15 '21 at 13:55
Try this https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing — thep nguyen nhu, Mar 15 '21 at 16:25

score 0 · Answer 1 · answered Mar 16 '21 at 08:03

you can do like this

   resetcanvas() {
      var c = document.getElementById("myCanvas");
      this.canvas.clearRect(0, 0, c.width, c.height)
    }

new Vue({
 el: '#app',
 data: {
    x: 0,
    y: 0,
    isDrawing: false,
    canvas: null,
  },
  methods: {
    resetcanvas() {
      var c = document.getElementById("myCanvas");
      this.canvas.clearRect(0, 0, c.width, c.height)
    },
    drawLine(x1, y1, x2, y2) {
      let ctx = this.canvas;
      ctx.beginPath();
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 1;
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
      ctx.closePath();
    },
    beginDrawing(e) {
      this.x = e.offsetX;
      this.y = e.offsetY;
      this.isDrawing = true;
    },
    keepDrawing(e) {
      if (this.isDrawing === true) {
        this.drawLine(this.x, this.y, e.offsetX, e.offsetY);
        this.x = e.offsetX;
        this.y = e.offsetY;
      }
    },
    stopDrawing(e) {
      if (this.isDrawing === true) {
        this.drawLine(this.x, this.y, e.offsetX, e.offsetY);
        this.x = 0;
        this.y = 0;
        this.isDrawing = false;
      }
    }
 
  },
  mounted() {
    var c = document.getElementById("myCanvas");
    this.canvas = c.getContext('2d');
  }
})

canvas{
  width: 560px;
  height:360px;
  border:1px solid #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <button @click="resetcanvas">Reset Canvas</button>
    <canvas id="myCanvas" width="560" height="360" @mousedown="beginDrawing" @mousemove="keepDrawing" @mouseup="stopDrawing"/>
</div>

VueJS How can I clear the canvas?

1 Answers1