JSFiddle - React, Tailwind, and code Playground

by theodore itzaris

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js&quot;"></script>
<div class="wrapper" style="backgroundColor='green';display:block">
    <div class="t-shirt">
        <canvas id="c" width="500" height="400"></canvas>        
        <input type="button" id="saveImg" value="Save Image"/>
    </div>
    <div class="myText" style="float:right">
        <input type="text" id="logo"/>
        <input type="button" id="loadText" value="Load Text"/>
        <input type="button" id="left" value="left"/>
        <input type="button" id="right" value="right"/>
        <input type="button" id="top" value="top"/>
        <input type="button" id="bottom" value="bottom" />
    </div>
</div>

JavaScript

var canvas = new fabric.Canvas('c');
var scaleFactor=0.4

canvas.backgroundColor = 'yellow';
canvas.renderAll();
var myImg = 'http://izy.urweb.eu/files/tshirt.jpg';



fabric.Image.fromURL(myImg, function(myImg) {
    var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });

    var text = new fabric.Text('the_text_sample\nand more', {
                fontFamily: 'Arial',
                fontSize:20,
            });

    text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
    text.set("left",myImg.width*scaleFactor/2-text.width/2);

    var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
    canvas.add(group);
console.log(canvas._objects[0]._objects[1].text);
});


$('#loadText').on('click',loadText);
$('#saveImg').on('click',saveImg);

function loadText(){
    console.log($('#logo').val());
    canvas._objects[0]._objects[1].text = $('#logo').val();
    canvas.renderAll();
}


function saveImg(){    
    console.log('export image');
     if (!fabric.Canvas.supports('toDataURL')) {
      alert('This browser doesn\'t provide means to serialize canvas to an image');
    }
    else {
      window.open(canvas.toDataURL('png'));
    }
}

$('#left').on('click',function(){
    canvas._objects[0]._objects[1].set('left',canvas._objects[0]._objects[1].left-1);
    canvas.renderAll();
})

$('#right').on('click',function(){
    canvas._objects[0]._objects[1].set('left',canvas._objects[0]._objects[1].left+1);
    canvas.renderAll();
})


$('#top').on('click',function(){
    canvas._objects[0]._objects[1].set('top',canvas._objects[0]._objects[1].top-1);
    canvas.renderAll();
})

$('#bottom').on('click',function(){
    canvas._objects[0]._objects[1].set('top',canvas._objects[0]._objects[1].top+1);
    canvas.renderAll();
})