Как clearRect сделать круглым в JavaScript?

Здравствуйте, у меня есть такой canvas
<canvas id="c1" width="450" height="450"></canvas>
и такой js

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


ctx.fillStyle = '#00bf54';
ctx.fillRect(0, 0, 450, 450);
    canvas.onmousedown = function (event) {
        canvas.onmousemove = function (event) {
        var x = event.clientX;
        var y = event.clientY;
        ctx.clearRect(x+0, y+0, 45, 45);

    }
    canvas.onmouseup = function () {
        canvas.onmousemove = null;
    }
}

при нажатии и движении удаляется блок canvas -а через clearRect с квадратами.
Как вместо квадрат сделать круги?