是否可以在背景颜色和背景图像之间交替？

Question

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, so I call gl.clearColor(0, 0, 0, 1); at my setup. 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?

Answer 1

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()