Javascript 如何在不同页面上具有不同背景图像的画布上使用相同的功能？

我使用fabric.js操纵不同的画布，使其具有自己的尺寸和背景图像。我的问题是，我不知道如何继续使用以下功能与新画布不同的背景图像（我坚持与一个背景图像）。我曾尝试使用以下内容创建新画布，并使用CSS控制它们的背景，但它在第二页破坏了应用程序：

var canvas = new fabric.Canvas('d');

我还在学习如何处理不同的画布，所以不确定如何处理。提前谢谢

详细信息：

现在我有两页，其中一页有：

<canvas width="500" height="500" id="c"></canvas>

首先

给你的画布（第二页）一个不同的

id

，例如

d

<canvas width="700" height="700" id="d"></canvas>

这将确保页面上存在适当的画布

第三

现在，在css中为每个画布（按其id）设置不同的背景图像，如下所示

#c {
    background: url(http://i.imgur.com/RkNFWSY.jpg);
}
#d {
    background: url(http://i.imgur.com/GYpod56.jpg);
}

---

就这样，谢谢你！我很感激你的失败，非常有帮助。

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

.myFile {
  position: relative;
  overflow: hidden;
  float: left;
  clear: left;
}
.myFile input[type="file"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  font-size: 30px;
  filter: alpha(opacity=0);
}

<canvas width="700" height="700" id="d"></canvas>

var id = document.getElementById('c') && c ||
         document.getElementById('d') && d;
var canvas = new fabric.Canvas(id);

#c {
    background: url(http://i.imgur.com/RkNFWSY.jpg);
}
#d {
    background: url(http://i.imgur.com/GYpod56.jpg);
}