Here is the code to add text on html5 canvas using fabricjs
Javascript code:
Link for jsfiddle https://jsfiddle.net/nvivekgoyal/ybogocmf/
<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
Post a Comment