clearRect function not working in Javascript

Question

I have some code that should be clearing a 50px wide gap in a rect(). But for some reason it isn't working. I've tried several different ways, but I can't seem to get it to work. Any help will be greatly appreciated!

My Code

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var rectWidth = 50;
var rectHeight = 50;
var rectRad = 25;
var x = (canvas.width / 2) - rectRad;
var y = canvas.height - 100;
var dx = 4;
var cw = canvas.width;
var ch = canvas.height;
var leftPressed = false;
var rightPressed = false;

function rect() {
  ctx.beginPath();
  ctx.rect(x, y, rectWidth, rectHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

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



function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  rect();
  bar();

  if (leftPressed == true && x + dx > 0) {
    x -= dx;
  }

  if (rightPressed == true && x + dx < cw - rectWidth) {
    x += dx;
  }
}
setInterval(draw, 10);

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode === 37) {
    leftPressed = true;
  }

  if (e.keyCode === 39) {
    rightPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode === 37) {
    leftPressed = false;
  }

  if (e.keyCode === 39) {
    rightPressed = false;
  }
}

* {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
}

<canvas id="myCanvas" width="480" height="320"></canvas>

Where are you attempting to clear a 50x50 rectangle? And maybe the problem is you're clearing the rectangle before you draw it? — Khauri
– Khauri, Commented Jul 17, 2017 at 20:47
50px from the left of the bar. And its not that cause I tried changing the order but it didn't work. — Gavin T
– Gavin T, Commented Jul 17, 2017 at 20:48
I notice you are not calling stroke at all. Javascript canvas is a little confusing it doesn't actually draw anything until you call the stroke method. developer.mozilla.org/en-US/docs/Web/API/… — Thomas Devries
– Thomas Devries, Commented Jul 17, 2017 at 20:50
But I called fill() Thomas Devries. I thought the only difference is stroke() is hollow. — Gavin T
– Gavin T, Commented Jul 17, 2017 at 20:53

Khauri · Accepted Answer · 2017-07-17 20:55:33Z

1

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
}

answered Jul 17, 2017 at 20:55

Khauri

3,8731 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blindman67 Over a year ago

Could have been done with

function bar () { ctx.fillStyle = "#F90";ctx.fillRect(0, (ch / 2) - rectRad, cw, 50); ctx.clearRect(50, (ch/2) - 25, 50, 50); }

As you have it the ctx.closePath is redundant and does nothing and why use beginPath and fill when it's only one rectangle.

Khauri Over a year ago

I decided not to change OP's code too much because that wasn't the question. I'm sure OP had a reason he wanted to do it this way as well. If he's planning to add to his path with other shapes or rectangles or lines, then this is a pretty versatile way to do it.

Collectives™ on Stack Overflow

clearRect function not working in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related