Redraw text on change, with automatic zooming, using fabric.js My code works, but I think that my code is non-standard, not optimized, and has poor logic.  I want to improve my coding skills, so please suggest how to improve my code.



var canvas = new fabric.Canvas('editor');
// Fabricjs 
var textbox = new fabric.Text('Your Text', {
  left: 100,
  top: 0,
  width: 800,
  textAlign: 'center',
  fontFamily: "Impact",
  fontSize: 76,
  radius: 230,
  rotate: 0,
  selectable: false,
  hasControls: false,
  effect: "STRAIGHT",
  charSpacing: 10,
  spacing: 40
});
canvas.add(textbox).renderAll();
canvas.setActiveObject(canvas.item(canvas.getObjects().length - 1));

// Apply selected Text on change
jQuery("#Eletter").keyup(function() {
  $Eletter = jQuery("#Eletter").val();
  var obj = canvas.getActiveObject();
  //alert(isFloat(obj.getWidth()));
  if (obj) {
    // $priceHight = calcu();
    var widc = obj.getWidth().toFixed(0);
    //console.log(parseInt(widc));
    var letterins = jQuery("#Eletter").val();
    var letterLenghts = letterins.length;
    var LetteringL = jQuery("#LetteringL").val();
    if (letterLenghts &gt; LetteringL) {
      if (widc &gt;= 400.00 &amp;&amp; widc &lt;= 430.00) {
        // alert("am working");
        canvas.setZoom(canvas.getZoom() / 1.1);
      } else if (widc &gt;= 600 &amp;&amp; widc &lt;= 630.00) {
        canvas.setZoom(canvas.getZoom() / 1.1);
      } else if (widc &gt;= 800 &amp;&amp; widc &lt;= 830.00) {
        canvas.setZoom(canvas.getZoom() / 1.2);
      } else if (widc &gt;= 1000 &amp;&amp; widc &lt;= 1030.00) {
        canvas.setZoom(canvas.getZoom() / 1.2);
      } else if (widc &gt;= 1200 &amp;&amp; widc &lt;= 1230.00) {
        canvas.setZoom(canvas.getZoom() / 1.2);
      } else if (widc &gt;= 1400 &amp;&amp; widc &lt;= 1430.00) {
        canvas.setZoom(canvas.getZoom() / 1.1);
      } else if (widc &gt;= 1600 &amp;&amp; widc &lt;= 1630.00) {
        canvas.setZoom(canvas.getZoom() / 1.1);
      } else if (widc &gt;= 1800 &amp;&amp; widc &lt;= 1830.00) {
        canvas.setZoom(canvas.getZoom() / 1.1);
      } else if (widc &gt;= 1200 &amp;&amp; widc &lt;= 1230.00) {
        canvas.setZoom(canvas.getZoom() / 2.1);
      }
    } else {

      if (widc &gt;= 400.00 &amp;&amp; widc &lt;= 430.00) {
        //alert("am working");
        canvas.setZoom(canvas.getZoom() * 1.1);
      } else if (widc &gt;= 600 &amp;&amp; widc &lt;= 630.00) {
        canvas.setZoom(canvas.getZoom() * 1.1);
      } else if (widc &gt;= 800 &amp;&amp; widc &lt;= 830.00) {
        canvas.setZoom(canvas.getZoom() * 1.2);
      } else if (widc &gt;= 1000 &amp;&amp; widc &lt;= 1030.00) {
        canvas.setZoom(canvas.getZoom() * 1.2);
      } else if (widc &gt;= 1200 &amp;&amp; widc &lt;= 1230.00) {
        canvas.setZoom(canvas.getZoom() * 1.2);
      } else if (widc &gt;= 1400 &amp;&amp; widc &lt;= 1430.00) {
        canvas.setZoom(canvas.getZoom() * 1.1);
      } else if (widc &gt;= 1600 &amp;&amp; widc &lt;= 1630.00) {
        canvas.setZoom(canvas.getZoom() * 1.1);
      } else if (widc &gt;= 1800 &amp;&amp; widc &lt;= 1830.00) {
        canvas.setZoom(canvas.getZoom() * 1.1);
      } else if (widc &gt;= 1200 &amp;&amp; widc &lt;= 1230.00) {
        canvas.setZoom(canvas.getZoom() * 2.1);
      }
    }
  }
  //  canvas.setHeight(obj.getHeight() + 200);
  // obj.set("top", 0); 
  canvas.getActiveObject().setText($Eletter);

  canvas.renderAll();
  jQuery("#LetteringL").val(letterLenghts);
});
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;


&lt;div class="wrapper-canvas"&gt;
  &lt;canvas class="" id="editor" width="1000" height="auto"&gt;&lt;/canvas&gt;
&lt;/div&gt;





&lt;input class="text-input" type="text" id="Eletter" value="Your Text"&gt;

&lt;input id="LetteringL" type="hidden" value=""&gt;




This example is also available as a Fiddle.
Review and rewrite.
Code

Use strict mode by adding the directive &quot;use strict&quot;; to the top of the javascript file.

Use const for variables that do not change.

Don't query the DOM every time you want an element. Get it once, and store it for later use.

Don't duplicate data. You have $Eletter and letterins both of which hold the same data.

toFixed returns a string not a number so be careful with its use. You can use Math.round(value) to round a value.

Don`t create copies of variables if you only use them once.


The following are all not needed
var letterins = jQuery(&quot;#Eletter&quot;).val();
var letterLenghts = letterins.length;
var LetteringL = jQuery(&quot;#LetteringL&quot;).val();


Use arrays as lookups when you have sets of data with values attached.

Eg your zoom settings (BTW you repeated the 1200 zoom setting of 2.1 it will never be set)
// a list of the widths and associated zooms
const zoomSettings = [
    {widths: [400, 600, 1400, 1600, 1800], zoom: 1.1}, 
    {widths: [800, 1000, 1200], zoom: 1.2}
];

// function gets the zoom setting depending on width
// if a matching zoom can not be found then a zoom of 1 is returned
const getZoom = (width) =&gt; {
    var zoom = zoomSettings.find(arr =&gt; {
       return arr.widths.some(val =&gt; width &gt;= val &amp;&amp; width &lt;= val + 30)
    });
    if (zoom) { return zoom.zoom }
    return 1;
}

Now you don't have to have the long chain of if else statements. For details on the array methods some and find go to MDN array
jQuery
Do you really need jQuery?
I have never approved of jQuery for many reasons, one of them being that it encourages bad practices. These days its primary reason for existence (cross browser compatibility) no longer applies and it is a large complex script that your clients need to download, parse, and execute, which is a cost that they must bear.
Now I have an even better argument against its use. Using jQuery opens your site to security vulnerabilities see 77% of 433,000 Sites Use Vulnerable JavaScript Libraries
Thus I remove jQuery, as it is not needed and can be done with...
function query(query){
    return document.querySelector(query);
}

This is not a cover all solution but just a short cut to the standard DOM query.
A rewrite
I have rewritten the code using the above as a guide.
I have written it to do the same as your code as I am not sure what your aim is with the zoom setting, they seem arbitrary and limited to only a small set of possible text widths.


"use strict";
const canvas = new fabric.Canvas('editor');
const textbox = new fabric.Text('Your Text', {
  left: 100,
  top: 0,
  width: 800,
  textAlign: 'center',
  fontFamily: "Impact",
  fontSize: 76,
  radius: 230,
  rotate: 0,
  selectable: false,
  hasControls: false,
  effect: "STRAIGHT",
  charSpacing: 10,
  spacing: 40
});
canvas.add(textbox).renderAll();
canvas.setActiveObject(canvas.item(canvas.getObjects().length - 1));

const zoomSettings = [
    {widths: [400, 600, 1400, 1600, 1800], zoom: 1.1}, 
    {widths: [800, 1000, 1200], zoom: 1.2}
];
const getZoom = (width) =&gt; {
    var zoom = zoomSettings.find(arr =&gt; {
        return arr.widths.some(val =&gt; width &gt;= val &amp;&amp; width &lt;= val + 30);
    });
    if (zoom) { return zoom.zoom }
    return 1;
}
function query (query) { return document.querySelector(query) }
const eLetter = query("#Eletter");
const letteringL = query("#LetteringL");
eLetter.addEventListener("keyup", keyUpEvent);
function keyUpEvent(event) {
    const obj = canvas.getActiveObject();
    if (obj) {
        const widc = Math.round(obj.getWidth());
        if (event.target.value.length &gt; letteringL.value) {
            canvas.setZoom(canvas.getZoom() / getZoom(widc));
        } else {
            canvas.setZoom(canvas.getZoom() * getZoom(widc));
        }
    }
    canvas.getActiveObject().setText(event.target.value);
    canvas.renderAll();
    letteringL.value = event.target.value.length;    
}
&lt;script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js" &gt;&lt;/script&gt;
&lt;div class="wrapper-canvas"&gt;
  &lt;canvas class="" id="editor" width="1000" height="auto"&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;input class="text-input" type="text" id="Eletter" value="Your Text"&gt;
&lt;input id="LetteringL" type="hidden" value=""&gt;