如何用特定的颜色填充整个画布

如何用一种颜色填充整个HTML5 .

我看到了一些像这样的解决方案来改变背景颜色使用CSS,但这不是一个好的解决方案,因为画布保持透明,唯一改变的是它占据的空间的颜色.

另一个是通过在画布内创建具有颜色的东西,例如矩形(参见此处),但它仍然没有用颜色填充整个画布(如果画布大于我们创建的形状).

是否有解决方案用特定颜色填充整个画布？

是的,只需填写与在画布纯色的矩形,使用height和width画布本身:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

canvas{ border: 1px solid black; }

let canvas = document.getElementById('canvas');
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
let ctx = canvas.getContext('2d');

//Draw Canvas Fill mode
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,canvas.width, canvas.height);

* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; }