Write text on HTML5 Canvas using fabricjs

Here is the code to add text on html5 canvas using fabricjs


<canvas id="c" width="600" height="600"></canvas>
<input type="text" class="add-text">  
<button class="add-text-btn">Add Text</button>


Javascript code:
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);

});

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

Comments