单击按钮更改 canvas 填充颜色

Question

I have an HTML canvas element that a user can draw on, and I want to change the fill color of the canvas when the refresh icon is clicked, and it set it to a different color depending on the body ID.

Currently the onClick function is changing the body ID and body color as a result but it is not updating the canvas fill color. Does anyone have any ideas.

I'm fairly new to HTML canvas and not really used it much before so any help is appreciated.

I think it is this bit of code that is wrong.

function refresh() {    
  const colors = ["blue", "red", "green", "pink"];  
  const random = Math.floor(Math.random() * colors.length);
  document.body.id = colors[random];
  
  var bodyid = document.body.id;
  console.log(bodyid);
  var bridge = document.getElementById("canvas"),
      bridgeCanvas = bridge.getContext('2d');
  
  if(bodyid  == 'red'){
    bridgeCanvas.fillStyle = "#6ecbff";
  } else if(bodyid  == 'blue') {
    bridgeCanvas.fillStyle = "#fedcdb";
  } else if(bodyid  == 'green') {
    bridgeCanvas.fillStyle = "#fefd55";
  } else if(bodyid  == 'pink') {
    bridgeCanvas.fillStyle = "#96b6cd";
  }
};

The full code is in the codepen below

https://codepen.io/oddpandadesign/pen/vYyybQG

Answer 1

You have to set the color first and then fill the rectangle.

bridgeCanvas.fillStyle = color;
bridgeCanvas.fillRect(0, 0, bridge.width, bridge.height);