Set Position By Origin

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<canvas id="paper" width="200" height="200" style="border:1px solid #ccc"></canvas>
<br>
<label>Top:</label>
<input id="top" type="number" disabled/>
<br>
<label>Left:</label>
<input id="left" type="number" disabled/>
<br>
<label>Color:</label>
<input id="color" type="text" disabled/>

SCSS

#paper {
  border: solid 1px red;
}

label {
  width: 45px;
  display: inline-block;
}

JavaScript

const canvas = new fabric.Canvas('paper');
const items = ['red', 'green'];

items.forEach((color, i)=>{
	const box = new fabric.Rect({
		id: color,
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    fill: color,
    angle: i * -45,
    originX: 'left',
  	originY: 'top'
	});
  canvas.add(box);
});
        
canvas.renderAll();

canvas.on('selection:created', ({target})=>{
	print(target);
});

canvas.on('selection:updated', ({target})=>{
	print(target);
});

function print(target){
	$("#top").val( target.top );
  $("#left").val( target.left );
  $("#color").val( target.id );
}