Fabric.js change ma taille de toile en 300x150 après l'initialisation

Question

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

Ma toile est redimensionnée à 300x150 après avoir été initialisée, pourquoi?

Answer 1

dans la dernière version, vous devrez faire quelque chose comme:

var canvas = new fabric.Canvas('myCanvas');
canvas.setHeight(500);
canvas.setWidth(800);

.... Votre code ....

canvas.renderAll();

Fonctionne bien pour moi ..

Answer 2

Lors de l'initialisation du canevas, Fabric lit les attributs largeur/hauteur sur l'élément canevas ou prend la largeur/hauteur passée dans les options.

var myCanvas = new fabric.Canvas('myCanvas', { width: 900, height: 600 });

ou:

<canvas width="900" height="600"></canvas>
...
var myCanvas = new fabric.Canvas('myCanvas');