Text styling of HTML5 Canvas using fabricjs

In previous post I have shared code to add text to HTML5 canvas using fabricjs. refer http://newapputil.blogspot.in/2017/03/write-text-on-html5-canvas-using.html

Here in this post below is the code to change text style to italic, making text bold and underline the text using fabricjs on html5 canvas.

This code will work when text object is selected.


<canvas id="c" width="600" height="600"></canvas>
<input type="text" class="add-text">  
<button class="add-text-btn">Add Text</button>
<button class="bold-text-btn">Bold</button>
<button class="underline-text-btn">Underline</button>
<button class="italic-text-btn">Italic</button>

javascript code:

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');


fabric.Image.fromURL('http://fabricjs.com/assets/printio.png', function(img){
    canvas.add(img.scale(1).set({ left: 0, top: 0, angle: 0, selectable: false}));
});

canvas.renderAll();

document.querySelectorAll('.add-text-btn')[0].addEventListener('click', function(){

    var textToAdd = new fabric.Text(document.querySelectorAll('.add-text')[0].value, {
       fontFamily: 'arial'
    });

    canvas.add(textToAdd);

});

document.querySelectorAll('.bold-text-btn')[0].addEventListener('click', function(){   
  canvas.getActiveObject().set('fontWeight', 'Bold');  //make text bold
  canvas.renderAll();    
});

document.querySelectorAll('.underline-text-btn')[0].addEventListener('click', function(){   
  canvas.getActiveObject().setTextDecoration('underline');  //underline text
  canvas.renderAll();  
});

document.querySelectorAll('.italic-text-btn')[0].addEventListener('click', function(){   
  canvas.getActiveObject().set('fontStyle', 'italic');    //make text style italic
canvas.renderAll();  
});


Link for jsfiddle https://jsfiddle.net/nvivekgoyal/ybogocmf/15/

Comments