HTML:
<div class="canvas-wrapper">
<canvas id="myCanvas"></canvas>
</div>
CSS
.canvas-wrapper {
width: 900px;
min-height: 600px;
}
#myCanvas{
border:1px solid red;
position: absolute;
top:22px;
left:0px;
height: 100%;
width: 99%;
}
JS
var myCanvas = new fabric.Canvas('myCanvas');
キャンバスが初期化された後、300x150にサイズ変更されます。なぜですか?
最新バージョンでは、次のようなことをする必要があります。
var canvas = new fabric.Canvas('myCanvas');
canvas.setHeight(500);
canvas.setWidth(800);
....コード....
canvas.renderAll();
私にとってはうまくいく..
キャンバスを初期化するときに、Fabricはキャンバス要素の幅/高さ属性を読み取るか、オプションで渡された幅/高さを取得します。
var myCanvas = new fabric.Canvas('myCanvas', { width: 900, height: 600 });
または:
<canvas width="900" height="600"></canvas>
...
var myCanvas = new fabric.Canvas('myCanvas');