Javascript 在画布上绘制时，画布背景图像将被清除

我试图编写的应用程序让用户将图像上传到画布上，然后在画布上画线。到目前为止，我已经上传到画布以及绘制线条，除了每当我在画布上绘制线条时，上传的图像就会消失。下面您将看到我目前为应用程序提供的html和javascript代码。各种元素都是从各种教程中获得的，因此我假设它们之间存在一些不兼容，即相互覆盖

HTML

---

使用

fabric.Image.fromURL

加载图像，然后使用

canvas.add（）

将其添加到画布

演示

//开始画线块
var canvas=new fabric.canvas（'c'{
选择：false
});
无功线路，isDown；
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
var points=[pointer.x，pointer.y，pointer.x，pointer.y]；
线=新织物。线（点{
冲程宽度：5，
填充：“红色”，
笔划：“红色”，
原文：“中心”，
原创：“中心”
});
canvas.add（行）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
line.set({
x2:pointer.x，
y2:pointer.y
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
isDown=假；
});
//端线图块
//开始文件上载块
功能el（id）{
返回文档.getElementById（id）；
}
函数readImage（）{
if（this.files&&this.files[0]）{
var FR=new FileReader（）；
FR.onload=功能（e）{
fabric.Image.fromURL（例如target.result、function（img））{
img.set({
左:0,，
排名：0，
事件：错误
});
img.scaleToWidth（canvas.width）；
img.setCoords（）；
canvas.add（img）；
})
};
FR.readAsDataURL（this.files[0]）；
}
}
el（“文件上传”）。添加了EventListener（“更改”，readImage，false）；
//结束文件上载块

<input type='file' id="fileUpload">
<canvas id="c" width = 750 height= 400 style="border:1px solid #ccc"></canvas>

// begin file upload block
function el(id) { return document.getElementById(id); } 

   var canvas = el("c");
   var context = canvas.getContext("2d");

   function readImage() {
       if (this.files && this.files[0]) {
           var FR = new FileReader();
           FR.onload = function (e) {
               var img = new Image();
               img.onload = function () {
                   context.drawImage(img, 0, 0,img.width,img.height,0,0,750,400);
               };
               img.src = e.target.result;
           };
           FR.readAsDataURL(this.files[0]);
       }
   }

   el("fileUpload").addEventListener("change", readImage, false);

//end file upload block

//begin line drawing block
var canvas = new fabric.Canvas('c', { selection: false });
var line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

//end line drawing block