JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<div id = "div1">
<p>Width:<span id = "widthValue"></span></p>
<p>Height:<span id = "heightValue"></span></p>
<p>Radius:<span id = "radiusValue"></span></p>
</div>

<canvas id='c1' width='1000px', height='500px'></canvas>

CSS

#c1
{
	border-style: solid;
	border-width: 1px;
}
#div1
{
float: right;
position: relative;
border-style: solid;
border-width: 1px;
height: 200px;
width: 200px;
display: inline;
}

JavaScript

var canvas = new fabric.Canvas('c1');
canvas.calcOffset();
var rect = new fabric.Rect({left: 100, top: 100, width: 30, height: 30, fill: '#66ff33', opacity: 0.5});
canvas.add(rect);
canvas.on('mouse:down', getMouse);
function getMouse(ev)
{
var pointer = canvas.getPointer(ev.e);
var origX = pointer.x;
var origY = pointer.y;
console.log(origX+', '+origY);
}