How to fill the whole canvas with specific color with JavaScript?

To fill the whole canvas with specific color with JavaScript, we set the fillStyle and call the fillRect method.

For instance, we write

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

to get the canvas with getElementById.

And then get its context with getContext.

Then we set the fill color by setting the fillStyle.

Finally we call fillRect to fill the canvas with the color by calling with 0, 0, canvas.width, and canvas.height.