Clear Canvas not working

Question

I have a basic page with a canvas. In Javascript I run a function after pressing a button that changes the background color and draws a basic rect shape.

I have a second button though that uses another JS function in order to clean the canvas but it doesn't work.

function clear() {
  var c = document.getElementById("can1");
  var ctx = c.getContext("2d");

  ctx.clearRect(0, 0, c.width, c.height);
  c.style.backgroundColor = white;
}

I have also a codepen-link so that you can see the whole code. Codepen page

Thank you in advance.

Answer 1

Renaming the function will do the trick.

When you are calling to clear() function in the onclick event, you will be executing document.clear() .

You can take a look here for more answers.