javascript - 添加到织物后画布位置移动

Question

我在我的屏幕上创建了画布。当我用下面的线为 Fabric.js 包装它时，它正在从位置移动。请提出是什么原因。

HTML::

<canvas id="design_text"   style="border:1px solid #000000; ">
  Your browser does not support the HTML5 canvas tag.
    </canvas>

CSS::

#middle_panel {
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    padding-top:15px;
    border: solid 1px red;
    text-align: center;
    background-color: #D0D0D0;
    height: 500px;
    width: 48%;
    margin-left: 27%;
}

JS ::

$(document).ready(function() {

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