CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
Kishor Admane
Kishor Admane

Reputation: 69

how to set a textbox text dynamically in fabric js Itext

i create a canvas, i add a fabric Itext, i want to fill text of textbox in Itext. my html code is...

 <input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

and javascript...

function Addtext() { 
var text = new fabric.IText('Enter text here...',      {fontSize:16,left:20,top:20,radius:10});
borderRadius = "25px";
canvas.add(text).setActiveObject(text);
text.hasRotatingPoint = true;
}

document.getElementById('title').addEventListener('keyup', function () {
var stringTitle = document.getElementById('title').value;
});

please help...thanks in advance.

Upvotes: 1

Views: 6507

Answers (1)

StefanHayden
StefanHayden

Reputation: 3669

Your question is very vague. this seems to be something close to what you are asking for. As you type in the textbox the iText updates. Although you can just click in to the iText on the canvas and type right in to so I'm not sure if you really need the html input at all.

window.canvas = new fabric.Canvas('c');

var textOptions = { 
  fontSize:16, 
  left:20, 
  top:20, 
  radius:10, 
  borderRadius: '25px', 
  hasRotatingPoint: true 
};

var textObject = new fabric.IText('Enter text here...', textOptions);

canvas.add(textObject).setActiveObject(textObject);
canvas.renderAll()

document.getElementById('title').addEventListener('keyup', function () {
  textObject.text = document.getElementById('title').value;
  canvas.renderAll();
});
canvas { border: 1px solid; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js" ></script>
<input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

Upvotes: 4

Related Questions