Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using fabric.js ,increase fontSize of canvas text on button click

i am using fabric.js to work on canvas . i have created text on canvas .now,onclick of button i want to increase font-size .

canvas.set({fontSize,40});

this is not working ? any other method .i have created fiddle please Check

   var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.Text('Sample', {
    left: 100,
    top: 100,
    fill: 'navy'
});

canvas.add(text);

document.getElementById('textinput').addEventListener('change', function (e) {
    var obj = canvas.getActiveObject();

    if (!obj) return;

    obj.setText(e.target.value);
    canvas.renderAll();
});

document.getElementById('btn').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();

   alert('button clicked');
     if (!obj) return;

    obj.set(fontSize,40);
    canvas.renderAll();
});
like image 295
anam Avatar asked Aug 28 '13 04:08

anam


2 Answers

Here is a working code,

var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.Text('Sample', {
  left: 100,
  top: 100,
  fontSize: 80,
  fill: 'navy'
});

canvas.add(text);
document
  .getElementById('btn')
  .addEventListener('click', function (e) {
    canvas.getActiveObject().set("fontSize", "30");
    canvas.renderAll();   
  });
like image 200
Prasanna Aarthi Avatar answered Oct 22 '22 19:10

Prasanna Aarthi


First of all, I was able to make this work by changing

obj.set('fontSize',40);

to

obj.setFontSize(40);

Second, I think that it is not the fontSize of your object that is changed when you resize it, but its scaleX and scaleY. Hope this helps.

like image 38
Stav Geffen Avatar answered Oct 22 '22 19:10

Stav Geffen