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.

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.

• javascript
• html5-canvas
• fabricjs

1 Answer 1

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./ajax/libs/fabric.js/1.6.4/fabric.min.js" ></script>
<input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>