Clearrect Function Doesn't Clear the Canvas

clearRect function doesn't clear the canvas

You should use "beginPath()". That is it.

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    context.clearRect(0, 0, context.width,context.height);
    context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

clearRect not working

Your real problem is you are not closing your circle's path.

Add ctx.beginPath() before you draw the circle.

jsFiddle.

Also, some tips...

• Your assets should not be responsible for drawing themselves (their draw() method). Instead, perhaps define their visual properties (is it a circle? radius?) and let your main render function handle canvas specific drawing (this also has the advantage that you can switch your renderer to regular DOM elements or WebGL further down the track easily).
• Instead of setInterval(), use requestAnimationFrame(). Support is not that great at the moment so you may want to shim its functionality with setInterval() or the recursive setTimeout() pattern.
• Your clearRect() should be passed the dimensions from the canvas element (or have them defined somewhere). Including them in your rendering functions is akin to magic numbers and could lead to a maintenance issue further down the track.

Why won't my canvas clear

To read about the canvas and the different types of context refer to MDN. We are using 2d context. For more details and available method in CanvasRenderingContext2D, you can visit the link.

Note: When you run the snippet, make sure to scroll down the output, if not visible properly. There is a "Clear" button to erase.

The key point in your code, I have added is

mounted: function() {
    var canvas = document.getElementById("canvasId");
    var ctx = canvas.getContext("2d");
    this.canvas = canvas;
    this.ctx = ctx;
}

new Vue({  el: '#app',  data: {    st: 50, ic: 10  },  mounted: function() {    var canvas = document.getElementById("canvasId");    var ctx = canvas.getContext("2d");    this.canvas = canvas;    this.ctx = ctx;  },  methods: {    dclick: function(e) {      this.ctx.rect = {        startX: 25,        startY: 100,        w: (this.canvas.width - 50),        h: 300,      }      this.draw();    },    draw: function() {      for (let i = 0; i < this.st; i += this.ic) {        this.ctx.beginPath();        this.ctx.moveTo(0, i);        this.ctx.lineTo(500, i);        this.ctx.stroke();        this.ctx.closePath();        this.ctx.fillStyle = "#222222";        this.ctx.fillRect(this.ctx.rect.startX, this.ctx.rect.startY, this.ctx.rect.w, this.ctx.rect.h);        //this.drawHandles();      }    },    clear: function() {      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);    }  }});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script><div id="app">  <div class="cv">    <canvas style='border:1px solid;' v-on:dblclick="dclick" id="canvasId" class="canvas" width="400" height="200"></canvas>    <canvas class="back" width="150" height="700" style="border:1px solid red"></canvas>    <button v-on:click="dclick">      Draw    </button>    <button v-on:click="clear">      Clear    </button>  </div>  <p style='margin-top: 100px'>-- Spacer--</p></div>

clearRect function not working in Javascript

You're trying to clear the area in the rectangle before you draw the rectangle. You have to call clearRect after you call fill.

Also, you're drawing it in the wrong spot slightly.

function bar() {
  ctx.beginPath();
  ctx.rect(0, (ch / 2) - rectRad, cw, 50);
  ctx.fillStyle = "#FF9900";
  ctx.fill();
  ctx.closePath();
  ctx.clearRect(50, (ch/2) - 25, 50, 50); // this line
}

How to clear the canvas for redrawing

Given that canvas is a canvas element or an OffscreenCanvas object, use clearRect:

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

Clear Canvas doesn't work

You are trying to call clearRect on the result of document.getElementById (DOM element). clearRect is a member of canvas context.

It should be:

function reset()
{
    canvas = document.getElementById("my");
    context = canvas.getContext("2d");
    context.clearRect(0,0, canvas.width, canvas.height);
}

Canvas Clear not working properly

That's because you changed the context.fillStyle, for that reason you are drawing using the white color, if you click again the black color on the botton right of your UI everything returns normal.
You can fix the problem like this:

var CleanCanvas = function(){
   var lastColor = context.fillStyle;
   context.fillStyle = 'white';
   context.fillRect(0,0, window.innerWidth, window.innerWidth);
   context.fillStyle = lastColor;
}

But I recommend you to use the default context.clearRect method for wiping the content, this method also resets the opacity to 0.

var CleanCanvas = function(){
   context.clearRect(0,0, canvas.width, canvas.height);
}

JavaScript canvas: when clearing with context.clearRect, everything reapears on next draw

You probably did not end your previous path. Make sure to call ctx.beginPath() before drawing your new lines.

const ctx = canvas.getContext('2d');function draw(){  ctx.clearRect(0, 0, canvas.width, canvas.height);  ctx.beginPath(); // <-  ctx.moveTo(0, 0);  ctx.lineTo(100, 100);  ctx.stroke();}function drawFaulty(){  ctx.clearRect(0, 0, canvas.width, canvas.height);  ctx.moveTo(100, 100);  ctx.lineTo(200, 200);  ctx.stroke();}

<canvas id="canvas" width="200" height="200"></canvas><br/><button onclick="draw()">Clear and Draw</button><br/><button onclick="drawFaulty()">Clear and Draw - Faulty</button>

---

Related Topics