I have this program where I can add lights to my scene (stored in an array lights). When I first start the program, I want everything to be black since I start with my array empty. But when there is a light, I want to change the background to an image, and when there are no lights, I want everything to be black again.
I´m trying to call this in my render function:
if(lights.length == 0) {
canvas.style.background = "#000000 none";
} else {
canvas.style.background = "transparent url('nebula.png')";
}
But it's not wroking as I intended. Does someone know how to achieve this?
don't use background properties on canvas.
Use context.fillRect() to set background color
Use context.fillImage() to set background image
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect <= fillRect()
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage <= fillImage()
Edit:
Example:
const cvs = document.getElementById(' /* your canvas */ ')
const context = cvs.getContext('2d')
// context is the CanvasRenderingContext2D
// use the two commands above to make background.