Comment afficher l'élément dans la bonne position dans FabricJs malgré son origine X et Y?

Question

J'ai deux éléments presque identiques à l'exception de leur sommet et de leur origine. Je ne comprends pas comment les placer sur la même gauche avec 2 origines différentes. Voici la vue attendue:

Et voici ce que je reçois:

->Here is the link to jsFiddler <-

Note: Leur GAUCHE est la même chose! C'est ce que je reçois de backend.

Tnx

var canvas = new fabric.Canvas('paper'); 
 

 
const red = new fabric.Rect({ 
 
    left: 100, 
 
    top: 50, 
 
    fill: 'red', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'center', 
 
    originY: 'center' 
 
}); 
 

 
const yellow = new fabric.Rect({ 
 
    left: 100, 
 
    top: 150, 
 
    fill: 'yellow', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'left', 
 
    originY: 'top' 
 
}); 
 

 
canvas.add(red); 
 
canvas.add(yellow);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script> 
 
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

Answer 1

Est-ce que vous voulez? Ici left et top sont identiques.

var canvas = new fabric.Canvas('paper'); 
 

 
const red = new fabric.Rect({ 
 
    left: 100, 
 
    top: 150, 
 
    fill: 'red', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'left', 
 
    originY: 'bottom' 
 
}); 
 

 
const yellow = new fabric.Rect({ 
 
    left: 100, 
 
    top: 150, 
 
    fill: 'yellow', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'left', 
 
    originY: 'top' 
 
}); 
 

 
canvas.add(red); 
 
canvas.add(yellow);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script> 
 
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>