JSFiddle - React, Tailwind, and code Playground

by juulia

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button2 class="menuButton" onclick="deleteObjects()">Delete</button2>
<button2 class="menuButton" onclick="Addtext()">Add Text</button2>

<label for="font-control">Font family:</label>
<select id="font-control" name="font-control">
    <option value="Arial">Arial</option>
    <option value="Times New Roman">Times</option>
</select>
<canvas id="c" width="342" height="291" style="border: 2px solid black;"></canvas>

CSS

.menuButton {
  background-color: #FFFFFF;
  border: 2px solid #4CAF50;
  color: black;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.menuButton:hover {
  background-color: #4CAF50;
  color: white;
}

JavaScript

var canvas = new fabric.Canvas('c', {});

var mytext = new fabric.IText('Type some Text', {
  fontFamily: 'Arial',
  left: 100,
  top: 100
});

canvas.add(mytext);


function textBoxChanged(e) {
  var target = e.target;
  message = target.value;
  drawScreen();
}

function updateControls() {
  textControl.value = canvas.getActiveObject().getText();
}

var fontControl = $('#font-control');
$(document.body).on('change', '#font-control', function() {
  mytext.fontFamily = fontControl.val();
  canvas.renderAll();
});