JSFiddle - React, Tailwind, and code Playground

by knospe

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="demo" style="border: 1px solid black"></canvas>

JavaScript

var canvas=new fabric.Canvas('demo');
canvas.setHeight(400);
canvas.setWidth(400);
var canvasCenter = canvas.getCenter();

var text = new fabric.IText('TESTING');
canvas.add(text);
text.set({ top: canvasCenter['top'] - text.getHeight()/2, left: canvasCenter['top'] - text.getWidth()/2 });
text.setCoords();
canvas.renderAll();


canvas.on('object:modified',function(e){
    var activeObject = e.target;
    var oCoords = activeObject.oCoords;
    
    // Get object's coords.
    var x = { tl: oCoords.tl.x, tr: oCoords.tr.x, bl: oCoords.bl.x, br: oCoords.br.x };
    var y = { tl: oCoords.tl.y, tr: oCoords.tr.y, bl: oCoords.bl.y, br: oCoords.br.y };
    
    var xMinResult = findExtrem('min', x);
    var xMaxResult = findExtrem('max', x);
    
    var yMinResult = findExtrem('min', y);
    var yMaxResult = findExtrem('max', y);
    //console.log('x_min: ' + xMinResult['extremValue'] + ', x_max: ' + xMaxResult['extremValue'] + '/ y_min: ' + yMinResult['extremValue'] + ', y_max: ' + yMaxResult['extremValue']);
    
    var xMin = xMinResult['extremValue'];
    var xMax = xMaxResult['extremValue'];
    var yMin = yMinResult['extremValue'];
    var yMax = yMaxResult['extremValue'];
    
    if(yMin < 0) {
        updateOrigin(yMinResult['extremKey'], 'yMin');
        //console.log('yMin: ' + yMin + ' / top: ' + 0);
        activeObject.set({ top: 0 });
    } 
    if (xMin < 0) {
        console.log('xMin < 0');
        updateOrigin(yMinResult['extremKey'], 'xMin');
        console.log('xMin: ' + xMin + ' / left: ' + 0);
        activeObject.set({ left: 0 });
    }
    if (xMax > canvas.width) {
        updateOrigin(xMaxResult['extremKey'], 'xMax');
        //console.log('xMax: ' + xMax + ' / top: ' + (canvas.width-activeObject.getWidth()));
        activeObject.set({ left: canvas.width });
        
    }
    if (yMax > canvas.height) {
        updateOrigin(yMaxResult['extremKey'], 'yMax');
        //console.log('yMax: '+ yMax + ' / top: ' +...