Cách điền toàn bộ canvas với màu cụ thể

Question

Cách điền toàn bộ HTML5 <canvas> bằng một màu.

Tôi thấy một số giải pháp như this để thay đổi màu nền bằng CSS nhưng đây không phải là giải pháp tốt vì canvas vẫn trong suốt, điều duy nhất thay đổi là màu của không gian mà nó chiếm.

Một số khác là bằng cách tạo ra một cái gì đó với màu sắc bên trong vải, ví dụ như một hình chữ nhật (see here) nhưng nó vẫn không lấp đầy toàn bộ vải với màu sắc (trong trường hợp vải lớn hơn hình dạng chúng tôi tạo ra).

Có giải pháp nào để lấp đầy toàn bộ khung bằng một màu cụ thể không?

Answer 1

Có, chỉ cần điền vào một Rectangle với một màu trên vải, sử dụng height và width của canvas bản thân:

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