Fabric js - Do not add more than two text areas to the canvas

Question

In my project with Fabric js 4.3.1 I am trying to set a limit for adding text to the canvas. my goal is to put a limit of 2 text additions, one for each textarea.

This is my code for now but it doesn't work well because every time I write in the textarea a text is added one above the other without limitations...

var canvas = this.__canvas = new fabric.Canvas('canvas');

$(function() {
            
            canvas.setHeight('300');
      canvas.setWidth('800');
      canvas.renderAll();
      
      fabric.Object.prototype.transparentCorners = false;
            fabric.Object.prototype.padding = 5;
            
            
            
            var textOptions = { 
              fontSize:16, 
              left:20,
              top:20, 
              radius:10, 
              borderRadius: '25px', 
              hasRotatingPoint: true 
            };
      
      var textOptions2 = { 
              fontSize:16, 
              left:20,
              top:50, 
              radius:10, 
              borderRadius: '25px', 
              hasRotatingPoint: true 
            };


            //TEXT 1
            $( "#AddTextCust" ).keyup(function() {
            var textObject = new fabric.IText($("#AddTextCust").val(), textOptions);
            if($.trim($(this).val()).length > 0){
            canvas.add(textObject);
            canvas.renderAll();
      }
            });

            document.getElementById('AddTextCust').addEventListener('keyup', function () {
              canvas.getActiveObject().text = document.getElementById('AddTextCust').value;
              canvas.renderAll();
            });
      
      
      //TEXT 2
      $( "#AddTextCust2" ).keyup(function() {
            var textObject = new fabric.IText($("#AddTextCust2").val(), textOptions2);
            if($.trim($(this).val()).length > 0){
            canvas.add(textObject);
            canvas.renderAll();
      }
            });

            document.getElementById('AddTextCust2').addEventListener('keyup', function () {
              canvas.getActiveObject().text = document.getElementById('AddTextCust2').value;
              canvas.renderAll();
            });
      
      
      
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script> 

<div id="contCanvasLogo" style="float:left;width:100%;">
 <canvas id="canvas" class="resize canvasLogo" style="width:500px;height:500px;border:1px solid #ccc;"></canvas>
 </div>
 
 <textarea id="AddTextCust" rows="3" cols="20"></textarea>
 <textarea id="AddTextCust2" rows="3" cols="20"></textarea>

How can I set this adding texts limit?

Answer 1

You're adding a new IText object on every keyup event. As a result, fabric is rendering multiple text fragments. (You also have multiple keyup event handlers doing the roughly same things to the same objects.)

Your original code:

            //TEXT 1
            $( "#AddTextCust" ).keyup(function() {
            var textObject = new fabric.IText($("#AddTextCust").val(), textOptions);
            if($.trim($(this).val()).length > 0){
            canvas.add(textObject);
            canvas.renderAll();
      }
            });

            document.getElementById('AddTextCust').addEventListener('keyup', function () {
              canvas.getActiveObject().text = document.getElementById('AddTextCust').value;
              canvas.renderAll();
            });

Rather than adding new IText objects, create just one and update that. (Also, remove one of the keyup event handlers):

            //TEXT 1
            const $addTextCust = $('#AddTextCust');
            const textObject = new fabric.IText($addTextCust.val(), textOptions);
            canvas.add(textObject);

            $addTextCust.keyup(function() {
              textObject.text = $addTextCust.val();
              canvas.renderAll();
            });