JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wmc_main" style="display: flex;">
  <div class="main-dropdown">
    <span>Select comments:</span>

    <input id="txtCustomComments" name="Comment" value="dummy text" placeholder="Custom comments here" class="pls-select-comments" type="text">


    <button name="btn-apply" id="btnApplyComments" value="apply" class="comment-apply-btn">
      Apply</button>
  </div>

  <div class="font-setting">
    <div class="color-picker">
      <span>Font Color:</span>
      <input id="btnColor" class="wmc-font-color" name="favcolor" value="#FF0000" type="color">
    </div>
    <div class="main-font-size">
      <span>Font Size:</span>
      <input id="bntfontsize" class="wmc-font-size" min="6" max="72" step="2" value="20" type="number">
    </div>
    <div class="comment-dropdown">
      <span></span>
      <input id="btnSave" value="Save" class="comment-apply-btn" type="button">

      <input value="Reset" onclick="reset()" class="comment-apply-btn" type="button">
    </div>
  </div>


  <canvas id="wmcCanvas">Your browser does not support the canvas element.</canvas>
</div>

CSS

.wmc_main {
  width: 420px;
  background: #F7F7F7;
  height: 75px;
  margin: 0 auto;
  padding: 10px 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-bottom: 5px solid #e3e3e3;
  padding-bottom: 8px;
}

.wmc_main span {
  color: #585858;
}

.main-dropdown form {
  width: 244px;
  float: left;
}

.main-dropdown form select.pls-select {
  height: 30px;
  width: 230px;
  border: 1px solid #dadada;
  color: #6b6b6b;
  padding: 0 10px;
}

.showhideCustomComment {
  width: 100%;
  float: left;
}

.comment-dropdown input.pls-select-comments {
  height: 27px;
  width: 210px;
  border: 1px solid #dadada;
  padding: 0 10px;
  color: #6b6b6b;
}

.comment-dropdown.showhideCustomComment {
  width: 100%;
  padding-bottom: 10px;
}

.showhideCustomComment span {
  width: 126px !important;
}

.comment-apply-btn {
  height: 30px;
  padding: 0 5px 0 5px;
  background: #05b5ef;
  border: none;
  color: #fff;
  line-height: 30px;
  margin-left: 0px;
  margin-top: 2px;
}

.wmc_main .main-dropdown span,
.wmc_main .comment-dropdown span {
  width: 126px;
  float: left;
  line-height: 30px;
  color: #05b5ef;
}

.wmc_main .main-dropdown {
  margin-bottom: 8px;
  width: 100%;
  float: left;
}

.wmc_main .color-picker {
  width: 182px;
  float: left;
}

.color-picker span {
  float: left;
  line-height: 26px;
  width: 126px;
}

.color-box {
  width: 16px;
  height: 14px;
  background: #ff0c0c;
  border: 6px solid #ebebeb;
  float: left;
}

.comment-dropdown {
  /*     width: 100px;     margin-bottom: 8px;     padding-top: 8px; */
  width: 105px;
  float: left;
  padding-top: 0;
}

input.wmc-font-size {
  width: 32px;
  padding: 0 0 0 4px;
  height:...

JavaScript

alert('click apply to add text and rectangle');
$(document).ready(function() {
 
  
});

function createCustomComments() {
  try {

    var selText = $('#txtCustomComments').val();
    var color = new fabric.Color(colorPicker.val()).toRgb();
    var fontSize = fontPicker.val();

    commentText = new fabric.IText(selText, {
      fontSize: fontSize,
      hasControls: false,
      hasBorders: true,
      originX: 'center',
      backgroundColor: 'rgba(0,0,0,0)',
      borderColor: color,
      //opacity: 0.6,
      fill: color,
      fontFamily: "helvetica"
    });

    var commentRectange = new fabric.Rect({
      originX: 'center',
      top: 30,
      width: 300,
      height: 200,
      fill: 'rgba(0,0,0,0)',
      stroke: color,
      strokeWidth: 4
    });

    var group = new fabric.Group([commentText, commentRectange], {
      left: 100,
      top: 150
    });

    canvas.add(group);
    canvas.bringForward(group);

  } catch (exception) {
    console.log(exception);
  }
}
$('#btnApplyComments').on('click', function() {
  createCustomComments();
});
$('#btnSave').on('click', function() {
  SaveResultImage();
});

$('#getjson').on('click', function() {
  getfabricJsonToText();
});
var commentRectange, commentText;
var canvas = new fabric.Canvas('wmcCanvas', {
  selection: true
});
var colorPicker = $('#btnColor');
var fontPicker = $('#bntfontsize');
var image = new Image();
var imageComp;

image.crossOrigin = "Anonymous";
image.onload = function() {
// the url is sub domain the image below is dummy
  imageComp = fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function(img) {
    var oImg = img.set({
      angle: 0,
      cornersize: 10,
      hoverCursor: "default",
      lockMovementX: true,
      lockMovementY: true,
      lockRotation: true,
      hasRotatingPoint: true,
      hasControls: false,
      hasBorders: false,
      lockScalingFlip: true,
      lockScalingX: true,
     ...