JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="getPOS();">Get Rect Position</button>
<canvas id="c" width="400" height="400"></canvas>

CSS

canvas {
    border: 1px solid #999;
    display:inline-block;
}
button {
    margin-top: 20px;
}

JavaScript

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)',
    originX: 0,
    originY: 0
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac',
    originX: 0,
    originY: 0
});

var group = new fabric.Group([rect, circle],{
    originX: 'center',
    originY: 'center'
});
canvas.add(group);
canvas.renderAll();

function getPOS(){
    var pos = rect.left + rect.group.left;
    alert("Position of rect from left:"+pos);
}