Javascript 添加图像后在画布上自由绘制问题

我正在尝试使用相机在我使用Phonegap和fabric.js构建的应用程序的画布上添加图像

这是可行的，因为它可以将图像添加到屏幕上。然后，我成功地将其保存到数据库中，并可以在保存后重新显示它

  function onPhotoURISuccessCanvas(imageURI){

  var canvas = new fabric.Canvas('cx0'); 
  canvas.setDimensions({width: 400, height: 600});

 fabric.Image.fromURL(imageURI, function(img) {
canvas.insertAt(img.set({ left: 400, top: 0, angle: 90, lockMovementX:true, lockMovementY: true,lockScaling: true, LockRotation:
true,selectable: false,isDrawingMode: true}).scale(0.25)),0; });


//this is the call to show the images
thisImage = serializeCanvasByIDx();

}

function serializeCanvasByIDx() {
    var canvas = document.getElementById('cx0');
    var serializedVal = 'data:,';
    if (canvas.toDataURL) serializedVal = canvas.toDataURL(); 
    return serializedVal;
    }

我现在希望能够启用自由绘图，以便可以在图像上绘制草图

    function deviceReady() {

    var canvas = new fabric.Canvas('cx0');
    canvas.setDimensions({width: 400, height: 600});
    var mode = document.getElementById('drawing-mode');

    mode.onclick = function() {
    canvas.isDrawingMode = !canvas.isDrawingMode;
    if (canvas.isDrawingMode) {
        mode.innerHTML = 'Enter edit mode';
    }
    else {
        mode.innerHTML = 'Enter draw mode';
    }


 };

    canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
    canvas.freeDrawingBrush.color = 'Black';
    canvas.freeDrawingBrush.width = 4;

}

绘图模式启用，但一旦我绘制草图，我添加的图像就会出现，我尝试了很多不同的技术，但看不出哪里出了问题

---

所有想法都受到赞赏。谢谢

嗨，这有没有想过？谢谢我想我只是在一个新的页面中加载了这个图像，它开始工作了，但仍然需要一些修改。