Javascript 更改视口宽度/高度而无需刷新时调整画布大小

我已经根据一个教程设置了一个画布，但我需要让它响应。目前，如果我更改视口大小并刷新，我可以调整画布的大小，但我需要它实时调整画布的大小

HTML:

我已尝试添加EventListener，但控制台显示以下错误：

未捕获类型错误：canvas.setSize不是函数“

---

如何让EventListener正常工作？

您可以使用类似的方法：

canvas.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

canvas.setSize

实际上不是一件事，所以这就是为什么会出现TypeError

var canvas = document.querySelector('canvas'); 

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

window.addEventListener('resize',() => {
    canvas.setSize(window.innerWidth,window.innerHeight);
})

var c = canvas.getContext('2d');

//Rectangles

c.fillStyle = "rgba(255,0,0,0.2)"
c.fillRect(50, 100, 100, 100);

canvas.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});