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="400" height="200" style="border:1px solid #ccc"></canvas>
<br>
<label>Left:</label>
<input id=left type="number" disabled/>
<button id="rotate">Rotate</button>

SCSS

#paper {
  border: solid 1px red;
}

JavaScript

const canvas = new fabric.Canvas('paper');
        
const redBox = new fabric.Rect({
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    fill: 'red',
    angle: 45
});

/* redBox.setPositionByOrigin({
  x: 100, 
  y: 100
}, 'left', 'top'); */

redBox.on("moving", ()=>{
	printLeft();
});

canvas.add(redBox);
canvas.renderAll();

printLeft();


function printLeft(){
	$("#left").val( redBox.left )
}

let angle=0;
$("#rotate").click(function(){
	angle += 10;
	redBox.rotate(angle);
	canvas.renderAll();
});