Wie füllt man die ganze Leinwand mit einer bestimmten Farbe

Question

Wie füllt man ganze HTML5 <canvas> mit einer Farbe.

Ich sah einige Lösungen wie this Hintergrundfarbe mit CSS ändern, aber das ist keine gute Lösung, da die Leinwand transparent bleibt, ändert sich nur die Farbe des Raumes, den es belegt.

Eine andere ist, indem Sie etwas mit der Farbe innerhalb der Leinwand erstellen, zum Beispiel ein Rechteck (see here), aber es füllt immer noch nicht die gesamte Leinwand mit der Farbe (falls die Leinwand größer ist als die von uns erstellte Form).

Gibt es eine Lösung, um die gesamte Leinwand mit einer bestimmten Farbe zu füllen?

Answer 1

Ja, füllen Sie einfach ein Rechteck mit einer Farbe über die Leinwand, verwenden Sie die height und width der Leinwand selbst:

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">