Fabric js - 将画布宽度和高度设置为 100%

Question

我正在使用 Fabric js 4.3.1 库，并且希望能够使画布区域适应其父 div #contCanvasLogo。

我做了一些尝试，但没有任何效果，画布会自行调整大小。 这是我的代码，但不起作用：

var canvas = this.__canvas = new fabric.Canvas('canvas');
canvas.setHeight('100%');
canvas.setWidth('100%');

#contCanvasLogo {
  width: 300px;
  height: 300px;
background: black;
}

#canvas{border:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.js" integrity="sha512-CzyxOXSECwo2nGJQZ2P8fdDxWVMVzn0jNdT2lYJ3afbqDJbaQ4qxgv9sLc85f6KP8HO2y929Bu+lnPKGC3ofSg==" crossorigin="anonymous"></script>
<div id="contCanvasLogo">
  <canvas id="canvas" class="resize canvasLogo"></canvas>
</div>

Answer 1

您可以通过从父容器中检索数据来设置高度和宽度。

canvas.setHeight(document.getElementById("contCanvasLogo").clientHeight);
canvas.setWidth(document.getElementById("contCanvasLogo").clientWidth);