JSFiddle - React, Tailwind, and code Playground

by franknstayn

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<div class="flip--btn" id="o_front">
	Front
</div>
<div class="flip--btn" id="o_back">
  Back
</div>

<div class="input-append">
  <label class="col-md-12">Enter text below</label>
  <input class="text-dsign" id="text-string" type="text" placeholder="add text here...">
  <button id="add-text" class="add-text" title="Add text">Apply </button>
</div>
                    
<div id="preview_t">
  <div id="preview_front" style="background-color: rgb(255, 255, 255);">
    <img id="tshirtFacing" src="https://images.inksoft.com/images/products/2075/products/9000/Ash/front/500.png">
    <div class="front_print">
      <canvas id="tcanvas" width=200 height="400" class="hover" style="-webkit-user-select: none;"></canvas>
    </div>
  </div>
  <div class="none" id="preview_back" style="background-color: rgb(255, 255, 255);">
    <img src="https://images.inksoft.com/images/products/2075/products/9000/Ash/back/500.png">
    <div class="back_print">
      <canvas id="tbcanvas" width=200 height="400" class="hover" style="-webkit-user-select: none;"></canvas>
    </div>
  </div>
</div>

CSS

.none{
  display:none;
}
.flip--btn{
  cursor:pointer; float:left; padding:20px;
  background:#000; color:#fff;
}
.input-append{
  float:left; width:100%; margin-bottom:10px;
}
.front_print,.back_print{
	position: absolute;
    top: 200px;
    left: 165px;
    z-index: 10;
    width: 200px;
    height: 330px;
}
.front_print:hover{
	border:1px solid #000;
}
.back_print:hover{
	border:1px solid #000;
}

JavaScript

$(document).ready(function(){

$("#o_front").click(function(){
		$("#preview_front").removeClass('none') ;
		$("#preview_back").addClass('none') ;
	});
	$("#o_back").click(function(){
		$("#preview_back").removeClass('none') ;
		$("#preview_front").addClass('none') ;
	});
  
  $("#o_back").click(function(){
		$("#add-text").attr("id", "add-text2"); 
		$("#text-string").attr("id", "text-string2"); 
	});

	$("#o_front").click(function(){
		$("#add-text2").attr("id", "add-text"); 
		$("#text-string2").attr("id", "text-string"); 
	});
  
  
canvasfront = new fabric.Canvas('tcanvas', {
		hoverCursor: 'pointer',
	  	selection: true,
	  	selectionBorderColor:'blue'
	});
	backCanvas = new fabric.Canvas('tbcanvas', {
		hoverCursor: 'pointer',
	  	selection: true,
	  	hasRotatingPoint: true,
	  	selectionBorderColor:'blue'
	});
	
   
   $( ".input-append" ).on( "click", "button", function( event ) {
 		var elem = $( this );
	    if ( elem.attr("id") == "add-text2" ) {
	        var txt = $(".text-dsign").val();
		    var textSam = new fabric.Text(txt, {
		      left: 100,
		      top: 200,
		      fontFamily: 'helvetica',
		      angle: 0,
		      fill: '#000000',
		      scaleX: 0.5,
		      scaleY: 0.5,
		      fontWeight: '',
	  		  hasRotatingPoint:true
		    });		    
		    backCanvas.add(textSam);	
	        backCanvas.item(backCanvas.item.length-1).hasRotatingPoint = true;

	        $("#texteditor").css('display', 'block');
	        $("#imageeditor").css('display', 'block');
	    } 
	    else if(elem.attr("id") == "add-text"){
			var text = $("#text-string").val();
		    var textSample = new fabric.Text(text, {
		      left: 100,
		      top: 200,
		      fontFamily: 'helvetica',
		      angle: 0,
		      fill: '#000000',
		      scaleX: 0.5,
		      scaleY: 0.5,
		      fontWeight: '',
	  		  hasRotatingPoint:true
		    });		    
		    canvasfront.add(textSample);	
	        canvasfront.item(canvasfront.item.length-1).hasRotatingPoint = true;

	       ...