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

Fabric js - Set Canvas width and height to 100%

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

我已经尝试了几次,但没有任何效果,canvas 一直在自行调整大小。 这是我的代码,但不起作用:

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>

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

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