在画布中添加元素会删除背景并在白色画布上呈现自身

Question

在画布中添加任何结构js元素（如文本或任何形状）会删除我之前在画布中设置的背景，并且对象会在白色画布上呈现自身。我想在我的画布上加载具有背景的对象。

我尝试了renderAll（）和bind（）但它根本没用。

这里c是另一个画布，window.canvas是另一个，我将c设置为window.canvas的背景。这里一切都很好

var ctx = window.canvas.getContext("2d");
var background = new Image();
background.src = c.toDataURL("image/png", 1.0);

background.onload = function(){
ctx.drawImage(background,0,0,this.naturalWidth,this.naturalHeight,0,0,window.canvas.width,window.canvas.height);
}

window.canvas.setHeight(c.height);
window.canvas.setWidth(c.width);
window.canvas.renderAll();

当我在白色画布上绘制此形状或任何其他织物元素而不是在我的旧画布上绘制时出现问题，该画布是带有一些背景的window.canvas

shapCirEl.onclick = function() {
        var cir = new fabric.Circle({
            radius: 60,
            fill: 'red',
            top: 100,
            left: 100
        });
        cir.set({
            borderColor: 'black',
            cornerColor: 'black',
            cornerSize: 6,
            transparentCorners: false,
            hasRotatingPoint: false
        });
        window.canvas.add(cir);
        window.canvas.setActiveObject(cir);
    };

当我绘制这个形状或任何其他织物元素时，它会加载到白色画布上，而不是在我的旧画布上，即带有一些背景的window.canvas

Answer 1

使用setBackgroundImage设置背景图像。

var url = c.toDataURL("image/png", 1.0);
window.canvas.setBackgroundImage(url,function(){
  canvas.renderAll();
})