画布背景不在对象后面答案

【问题标题】：Canvas background not behind objects画布背景不在对象后面
【发布时间】：2017-06-14 20:03:38
【问题描述】：

所以我使用 fabric.js 和几个单独的 .php 页面来显示不同大小的画布。在一页上我有：

<canvas width="792" height="1008" id="c" style="background: url('./images/backgrounds/AmericanFlagBackground11x14.jpg')"></canvas>

在另一个页面上我有：

<canvas width="792" height="1008" id="c" style="background: url('./images/backgrounds/AmericanFlagBackground16x20.jpg')"></canvas>

并获得我想要的背景，但是当我去添加一个对象时，它们会在背景后面产生。如何强制图像位于添加的对象（如文本和图像）后面？

提前致谢。

【问题讨论】：

标签： javascript css canvas fabricjs

【解决方案1】：

不要使用内联样式属性设置画布的背景图像，而是将其设置在您的 css 文件中，就像这样...

#c {
   background: url(./images/backgrounds/AmericanFlagBackground11x14.jpg)
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
   top: 100,
   left: 100,
   width: 100,
   height: 100,
   fill: '#07C',
   originX: 'center',
   originY: 'center'
});
canvas.add(rect);

#c {
   background: url(http://i.imgur.com/Q6aZlme.jpg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

【讨论】：

这很接近但是我将如何处理其他维度？我试过给一个更大的画布 d #d { background: url(./images/backgrounds/AmericanFlagBackground16x20.jpg) } 的 id 没有运气。我需要创建新的画布变量吗？
嗯.. '处理其他维度'是什么意思？
道歉。我要改正我的问题
我试图重申我的问题。抱歉，我可能会让事情变得过于复杂 - 如果需要，我可以尝试重写它，但基本上我正在尝试根据您的回答设置多个 ID，并且仍然利用我为原始画布设置的所有 JS，但新画布没有像原来那样拿起 JS。
我的错。谢谢您的帮助。如果我不明白这一点，我将提交一个新问题。标记为已解决。干杯。

【解决方案2】：

似乎工作正常？

var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.style.backgroundImage = "url('https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100')";
setTimeout(function() {
  canvas.getContext("2d").fillRect(10, 10, 1000, 1000);
}, 1000 * 2);

【讨论】：