Replacing functions without clearing the whole canvas?

I'm trying to replace text with functions, without clearing all drawn text. Right now I can replace a function but only by clearing the whole canvas. I'd like it to be a little bit more dynamic so that a third function (for example) would remain.

Here's what I've got so far; note how the original text is cleared:

 var $ = function(id) {
   return document.getElementById(id)
 };

 var canvas = this.__canvas = new fabric.Canvas('c');
 canvas.setHeight(300);
 canvas.setWidth(500);
  
 function textOne() {
   canvas.clear();
   canvas.add(new fabric.IText('One', {
     left: 50,
     top: 100,
     fontFamily: 'arial',
     fill: '#333',
     fontSize: 50
   }));
 }
 
 // Text that should stay
canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', {
  left: 300,
  top: 45,
  fontFamily: 'Monsieur La Doulaise',
  fontSize: 27,
  hasBorders: false,
  hasControls: false,
  selectable: true,
  lockRotation: true,
  lockMovementX: true,
  lockMovementY: true,
  align: 'mid',
  originX: 'center',
  originY: 'center',
  centeredScaling: true,
}));

 function textTwo() {
   canvas.clear();
   canvas.add(new fabric.IText('Two', {
     left: 200,
     top: 100,
     fontFamily: 'arial black',
     fill: '#333',
     fontSize: 50
   }));
 }

 
canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>

Thanks in advance!

Answers 1

  • You just have to add an empty text inside your canvas and update it inside the corresponding functions. then execute canvas.renderAll after the updates. FYI, I have ZERO experience with fabric.js.

    var $ = function(id) {
       return document.getElementById(id)
     };
    
     var canvas = this.__canvas = new fabric.Canvas('c');
     canvas.setHeight(300);
     canvas.setWidth(500);
     
     var dynamicText = new fabric.IText('', {
       left: 50,
       top: 100,
       fontFamily: 'arial',
       fill: '#333',
       fontSize: 50
     })
     
     canvas.add(dynamicText);
     
     function textOne() {
       dynamicText.setText('ONE');
       canvas.renderAll();
     }
     
     // Text that should stay
    canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', {
      left: 300,
      top: 45,
      fontFamily: 'Monsieur La Doulaise',
      fontSize: 27,
      hasBorders: false,
      hasControls: false,
      selectable: true,
      lockRotation: true,
      lockMovementX: true,
      lockMovementY: true,
      align: 'mid',
      originX: 'center',
      originY: 'center',
      centeredScaling: true,
    }));
    
     function textTwo() {
       dynamicText.setText('TWO');
       canvas.renderAll();
     }
    canvas {
      border: 1px solid #dddddd;
      border-radius: 3px;
      margin-top: 5px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
    <button onclick="textOne()">One</button>
    <button onclick="textTwo()">Two</button>
    <canvas id="c"></canvas>


Related Articles