Javascript 背景色设置在背景图像的后面

我想在选择颜色时设置背景色。背景色被选中并显示，但如果我先选择图像，然后选择背景色，则背景色始终位于图像后面。如果我选择文本，文本将显示在背景的顶部。我怎样才能做到与背景色相似？我的意思是，当背景色被设置时，颜色应该像第二个屏幕截图一样显示。

下面是我设置背景图像和颜色的代码

componentDidMount() {
  const canvas = new fabric.Canvas(this.canvasEl);
  document.addEventListener("keydown", this.handleDeleteKey, false);
  canvas.on("object:selected", e => this.setState({ selected: e.target }));
  canvas.on("selection:cleared", e => this.setState({ selected: undefined }));
  this.setState({ canvas: canvas });
  this.setCanvasBackground(this.props.getSelectedImage.selectedImage, canvas);
}


componentWillReceiveProps(nextProps, nextState) {
  if (nextProps.getSelectedColor.hex) {
    this.setCanvasBackgroundColor(
      nextProps.getSelectedColor.hex,
      this.state.canvas
    );
  }
  if (nextProps.getSelectedImage.selectedImage) {
    this.setCanvasBackground(
      nextProps.getSelectedImage.selectedImage,
      this.state.canvas
    );
  }
}

setCanvasBackground = (image, canvas) => {
  canvas.setBackgroundImage(image, e => {
    canvas.renderAll();
  });
};

setCanvasBackgroundColor = (color, canvas) => {
  const rgbColor = new fabric.Color(color).toRgb();
  canvas.setBackgroundColor(rgbColor.toString(), () => canvas.renderAll());
};

---

您是否尝试过在“背景颜色选择”上强制删除图像？@pyromank我尝试过这个。state.canvas.backgroundImage=null；但不起作用当选择“图像”时，图像显示在背景颜色的顶部，而背景图像位于画布中时，如果我选择“颜色”以显示在画布中，则背景颜色不会显示在背景图像的顶部。当选择颜色时，我不想要第一个屏幕截图类型，但我希望第二个屏幕截图类型可能与@pyromank重复，这意味着我必须在

nextrops.getSelectedColor.hex
组件中使用
canvasToDrawOn
内部
nextrops.getSelectedColor.hex
willreceiveprops.