Updating font size from an input to fabric js canvas generated text

Question

i want to update the font size from this

<input value="1" id="fontSize" type="text">

input to

 $("#fontSize").on("change", () => {
      let fontsize = document.querySelector("#fontSize");
      sizeFromInput = fontsize.value;
      canvas.getActiveObject().set("fontSize", sizeFromInput);
    
      canvas.renderAll();
    });

this is my text generation function in fabric js

 $("#typeTool").click(() => {
        var textEditable = new fabric.Textbox("ASR Textbox", {
        width: 500,
        editable: true,
        fontFamily: "Delicious_500",
        left: 100,
        top: 100,
        fontSize: 18,
        fill: "#000",
      });
    
      canvas.add(textEditable);
    });

Answer 1

I think your code is working as expected. Maybe you could use the input event for an instant update as the change event fires in most browsers when content is changed and the element loses focus.

It will not fire for every single change as in the case input event.

https://stackoverflow.com/a/17047588/5646527

var canvas = new fabric.Canvas('c');
canvas.renderAll.bind(canvas);
$("#fontSize").on("change", () => {
  let fontsize = document.querySelector("#fontSize");
  sizeFromInput = fontsize.value;
  var activeObject = canvas.getActiveObject();
  if (activeObject) {
    activeObject.set("fontSize", sizeFromInput);
  }
  canvas.renderAll();
});
$("#typeTool").click(() => {
  var textEditable = new fabric.Textbox("ASR Textbox", {
    width: 50,
    editable: true,
    left: 10,
    top: 10,
    fontSize: 18,
    fill: "#000",
  });

  canvas.add(textEditable);
  canvas
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fabric@5.2.4-browser/dist/fabric.min.js"></script>
<button id="typeTool">Add Text</button>
<input type="text" id="fontSize" />
<br>
<canvas id="c" width="400" height="400"></canvas>
<br>
<p class="save">
</p>