Drawn rectangle through mouse-move keeps drawing itself whenever the mouse moves, while showing the previous rectangles

Question

I have a very odd case, must I say. First, let me share you the code I'm working with:

var CVSv2 = document.getElementById("CVS");


var ctx = CVSv2.getContext("2d");


var wH = window.innerHeight;
var wW = window.innerWidth;

CVS.height = wH;
CVS.width = wW;




DrawCanvas();

function DrawCanvas() {
  ctx.beginPath();
  ctx.fillStyle = "silver";
  ctx.fillRect(0, 0, wW, wH);
  ctx.fill();
}






function Paddle(xPositie, yPositie, pWidth, pHeight) {

  this.yPositie = yPositie;
  this.xPositie = xPositie;
  this.pWidth = pWidth;
  this.pHeight = pHeight;


  this.DrawPaddle = function() {
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.fillRect(this.xPositie, this.yPositie, this.pWidth, this.pHeight);
    ctx.fill();
  }

}





var paddlePong = new Paddle(0, 200, 15, 100);



CVSv2.onmousemove = function(arg) {
  paddlePong.yPositie = arg.pageY;
}



Animate();




function Animate() {
  paddlePong.DrawPaddle();
  setTimeout(Animate, 50);
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

<canvas id="CVS">
</canvas>

When the above code is executed, one rectangle gets drawn, and whenever I move the mouse, a second, a third, and fourth, etc., gets drawn, BUT the previously drawn rectangles still appear! I want them to go away. I want it to be like an animation. I want it to remain one rectangle that moves everytime the mouse moves, and I don't want to see the previous rectangles with the previous Y-coordinate.

This is what I mean

The rectangle somewhat in the middle gets drawn by default. When I move the mouse over the canvas, other ones pop up, and they overlap eachother as I move down (in the case of the photo's scenario). I've been stuck for this for 4 hours now, and I won't be surprised if it's a noob-mistake that's preventing it from working. It's 6am atm, so go figure. Anyway, hopefully any of you know how to solve that problem.

Akshay Akshay · Accepted Answer · 2017-08-19T04:21:16

You will have to use clearRect() (ctx.clearRect(0,0,wW,wH)) to clear the canvas and redraw everything like shown below.

var CVSv2 = document.getElementById("CVS");


var ctx = CVSv2.getContext("2d");


var wH = window.innerHeight;
var wW = window.innerWidth;

CVS.height = wH;
CVS.width = wW;

function DrawCanvas() {
  ctx.beginPath();
  ctx.fillStyle = "silver";
  ctx.fillRect(0, 0, wW, wH);
  ctx.fill();
}

function Paddle(xPositie, yPositie, pWidth, pHeight) {

  this.yPositie = yPositie;
  this.xPositie = xPositie;
  this.pWidth = pWidth;
  this.pHeight = pHeight;


  this.DrawPaddle = function() {
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.fillRect(this.xPositie, this.yPositie, this.pWidth, this.pHeight);
    ctx.fill();
  }

}

var paddlePong = new Paddle(0, 200, 15, 100);

CVSv2.onmousemove = function(arg) {
  paddlePong.yPositie = arg.pageY;
}



Animate();




function Animate() {
  ctx.clearRect(0,0,wW,wH);
  DrawCanvas();
  paddlePong.DrawPaddle();
  setTimeout(Animate, 50);
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

<canvas id="CVS">
</canvas>

Drawn rectangle through mouse-move keeps drawing itself whenever the mouse moves, while showing the previous rectangles

1 Answers