JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas"></canvas>
JavaScript
var canvas = new fabric.Canvas('canvas');
canvas.setWidth(300);
canvas.setHeight(300);
var circle = new fabric.Circle({
radius: 30,
fill: '#f55',
top: 100,
left: 100
});
canvas.add(circle);
circle.hasControls = circle.hasBorders = circle.selectable = false;
var movedObject = null;
canvas.on({
'mouse:down': function(e) {
//If an object is selected already it'll be unselected
if (movedObject !== null) {
movedObject = null;
} else {
//If no object was selected and a click occured on an object it'll now be selected
if (e.target) {
movedObject = e.target;
}
}
},
'mouse:move': function(e) {
//Moving the object along with mouse cursor
if (movedObject !== null) {
movedObject.left = (e.e.clientX - movedObject.width / 2);
movedObject.top = (e.e.clientY - movedObject.height / 2);
movedObject.setCoords();
canvas.renderAll();
}
}
});