當視口寬度/高度更改而無需刷新時調整 Canvas

Question

我已經根據教程設置了 canvas，但我需要讓它響應。 目前，如果我更改視口大小並刷新，我可以調整 canvas 的大小，但我需要它實時進行。

HTML：

<canvas id="canvas" width="" height=""></canvas>

JS：

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

我試過添加一個 EventListener 但控制台給了我以下錯誤：

未捕獲的類型錯誤：canvas.setSize 不是函數”

我如何讓 EventListener 工作？

Answer 1

你可以使用類似的東西：

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

canvas.setSize真的不是一個東西，所以這就是你得到 TypeError 的原因。