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();
});
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();
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With