Featured Post

Smart Product designer

Image
download and purchase link: https://alkanyx.com/item/49/Smart+Product+designer

Live preview : http://smartproductdesigner.000webhostapp.com/

Smart Product Designer is a  tool to create your own product and get directly from your website. It is well documented, very easy to customize and use. It is build using most advance technologies including javascript, jQuery and html5.
Features Choose different product from collectionAdd custom texts to product.Change text colorChange the size and font of the TextLet the user drag, move or remove elementsAdd images to product selected from art gallery or browse it from systemDesign both frontside and back-sideShows preview while designingDownload designVery easy to customize and useHere is the purchase link : https://alkanyx.com/item/49/Smart+Product+designer

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