帆布位置在添加到布料后移动

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');