Не получается очистить canvas рисовалку

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var myColor = "#fff"; 
ctx.fillStyle = "gray"; 
ctx.fillRect(10, 10, 400, 250); 
let clearButton = document.querySelector('#button'); 
 
 
 
canvas.onmousedown = function(event) { 
    var x = event.offsetX; 
    var y = event.offsetY; 
    ctx.beginPath(); 
 
    ctx.strokeStyle = myColor; 
    ctx.lineCap = "round"; 
    ctx.lineWidth = 8; 
    ctx.moveTo (x,y); 
    canvas.onmousemove = function (event){ 
        var x = event.offsetX; 
        var y = event.offsetY; 
        ctx.lineTo(x, y); 
        ctx.stroke(); 
        ctx.stroke(); 
 
    } 
    canvas.onmouseup = function() { 
        canvas.onmousemove = null; 
    } 
}; 
 
 
button.onclick = function (event) { 
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.fillRect(10, 10, 400, 250); 
};

<canvas id="canvas" width="400" height = "250"></canvas> 
<button id="button">Clear canvas</button>