How do I clear and change background colour of a canvas?

Question

Background colour has to be changed with the colour I'm drawing with.

So if i'm drawing with the colour red on the canvas I want to click the clear button and the canvas div will clear all the drawings and change the background colour to red.

Here is what I have so far but I don't know how to change the colour to the one I have selected

function ClearCanvas(sColour) {
    DebugMessage("Clear Canvas");
    const context = oCanvas.getContext('2d');
    context.clearRect(0, 0, oCanvas.width, oCanvas.height);
    document.getElementById("1Canvas").style.background = "____";
}

Possible duplicate of [How to fill the whole canvas with specific color](https://stackoverflow.com/questions/27736288/how-to-fill-the-whole-canvas-with-specific-color) — Rafael, Nov 11 '18 at 18:55

score 0 · Answer 1 · answered Nov 11 '18 at 18:57

When you draw a color on the canvas, you need to change the fillStyle to the color you wish. Changing the background-color of a canvas won't work.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const colors = ["blue", "green", "red", "pink", "purple", "grey", "black"];

function draw(color) {
  //This line is actually not even needed...
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.rect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = color;
  ctx.fill();
}

let i = 0;
setInterval(() => {
  draw(colors[i]);
  i = (i + 1) % colors.length;
}, 1000);

<canvas id="canvas">

How do I clear and change background colour of a canvas?

1 Answers1