Come riempire l'intero canvas con un colore specifico

Question

Come riempire l'intero HTML5 <canvas> con un colore.

Ho visto alcune soluzioni come this per cambiare il colore di sfondo tramite CSS ma questa non è una buona soluzione poiché la tela rimane trasparente, l'unica cosa che cambia è il colore dello spazio che occupa.

Un altro è creando qualcosa con il colore all'interno della tela, ad esempio un rettangolo (see here) ma non riempie ancora l'intera tela con il colore (nel caso in cui la tela sia più grande della forma che abbiamo creato).

Esiste una soluzione per riempire l'intera tela con un colore specifico?

Answer 1

Sì, basta compilare un rettangolo con un colore uniforme sulla tela, utilizzare il height e width della tela stessa:

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

<canvas width=300 height=150 id="canvas">