CODEWITHSUNDEEP
javascriptjquerycsscanvasfabricjs
anonymoose
anonymoose

Reputation: 1243

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!

Upvotes: 0

Views: 66

Answers (1)

Julio Betta
Julio Betta

Reputation: 2295

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>

Upvotes: 1

Related Questions