如何使用fabric js将图像添加到画布

Question

我正在尝试使用fabric.js将图像添加到画布。我想在每次单击按钮时添加图像。图像存储在我的计算机中。将图像添加到画布后，我希望能够将其拖到画布上。

这是我的javascript代码：

function addimage1() {
            var canvas = new fabric.Canvas('c');
             var img = document.createElement("img");
             img.src = url_1;
             img.height = 50;
             img.width = 100;
             //optionally set a css class on the image
              // var class_name = "foo";
              // img.setAttribute("class", class_name);

              var imgInstance = new fabric.Image(img, {
              left: 100,
              top: 100,
              angle: 30,
              opacity: 0.85
              });
              canvas.add(imgInstance);
             //document.getElementById("resizable").appendChild(img);
              //document.body.appendChild(img);
            }

这是按钮和画布的html代码：

<div class="description">
<canvas id="c" width="710" height="600" style="background-color: #ffffff" ></canvas>
</div>

我做错了什么，所以图像不会显示？