How to Fill your Canvas with a Specific Color with JavaScript

To fill your entire HTML canvas with a specific color, you can use the fillRect() property to fill a rectangle with a solid color.

Then you spread your filled rectangle across your canvas by using your canvas’ height and width property:

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
<canvas id="my-canvas">

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on