Question

How to Change the Default Black Background Color of an HTML Canvas?

I'm trying to change the default black background color of an HTML Canvas. Can someone help me with this?

Answer 1

To change the default black background color of an HTML <canvas>, you can use JavaScript to explicitly set the background color of the canvas element. By default, the <canvas> element has a transparent background, and any background color needs to be set manually through the context.fillStyle property or by drawing a filled rectangle.

First, get the canvas element and its context:

javascript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Then, set the desired background color using ctx.fillStyle and draw a rectangle to fill the canvas:

javascript

ctx.fillStyle = "lightblue"; // Set the background color to lightblue, for example
ctx.fillRect(0, 0, canvas.width, canvas.height);