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.
javascript code:
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
Post a Comment