背景颜色被设置背景图象

Question

我想在选择颜色时设置背景颜色。选择背景颜色并显示，但如果我选择图像然后选择背景颜色，则背景颜色始终位于图像后面。如果我选择文本，则文本显示在背景上方。我该怎么做背景颜色？我的意思是当设置背景颜色时，颜色应该像第二个屏幕截图一样显示。

这是我设置背景图片和颜色的代码

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