clearRect не очищает canvas

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.beginPath();
ctx.strokeStyle = 'green';

ctx.rect(50, 50, 400, 450);
ctx.fill();
ctx.stroke();

canvas.addEventListener('click', ev => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.arc(50, 50, 150, 0, Math.PI * (1 / 4));
  ctx.fill();
  ctx.stroke();
});

<canvas></canvas>