Canvas Clear not working properly

Question

Hello I currently am having some issues with my website application,

I have got the canvas to clear, but when I go to clear it it clears! which is great but when i go to draw again it doesn't give me a smooth line.

clear.js

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var CleanBtn = document.getElementById('clear');

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

CleanBtn.addEventListener('click', CleanCanvas);

my website is www.drawthelot.com

Answer 1

Use context.clearRect to clear the canvas, something like

context.clearRect(0,0, window.innerWidth, window.innerWidth);

DEMO

Answer 2

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);
}