Skip to main content

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

Popular posts from this blog

Show Image on canvas HTML5

Here is the sample code to select image from system and display it on html5 canvas and javascript: <input type= "file" id= "selectedImage" /> <canvas id= "myCanvas" width= "500" height= "500" > </canvas> Javascript code: $( "#selectedImage" ).change( function (e) { var URL = window .URL; var url = URL.createObjectURL(e.target.files[ 0 ]); img.src = url; img.onload = function () { var canvas = document .getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); var imgSize = calculateAspectRatioFit(img.width, img.height, canvas.clientWidth, canvas.clientHeight); ctx.clearRect( 0 , 0 , canvas.width, canvas.height); ctx.drawImage(img, 0 , 0 , imgSize.width, imgSize.height); } }); function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = Math .min(maxWi

Pass byte array from C# to C++ and vice-versa

Pass byte array from C# to C++                           If you want to pass a byte array to native DLL as parameter, you can use the Intptr to do this, please check the demo below. /C++ API code: TestDLL_API void TestArrayPara (BYTE * pArray, int nSize) { for ( int i= 0 ; i<nSize; i++) printf( "%d\n" , pArray[i]); } //C# code: class TestClass { [DllImport(@"TestDll.dll")] public static extern void TestArrayPara (IntPtr pArray, int nSize); public static void Test () { byte [] array = new byte [ 16 ]; for ( int i = 0 ; i < 16 ; i++) { array[i] = ( byte )(i + 97 ); } int size = Marshal.SizeOf(array[ 0 ]) * array.Length; IntPtr pnt = Marshal.AllocHGlobal(size); try { // Copy the array to unmanaged memory. Marshal.Copy(array, 0 , pnt, array

Display Tooltip for Combo Box item C#.NET Winforms

In windows form combo box control sometimes while adidng items dynamically we have items whose width is greater than width of combox box control. In this case for making UI more user friendly we can show tooltip over such item. Here is the sample C# code to display such tooltip:  Add a Tooltip control on the form.  Add following code : this . combo_box1 . DropDownStyle = System . Windows . Forms . ComboBoxStyle . DropDownList; this . combo_box1 . DrawMode = DrawMode . OwnerDrawFixed; this . combo_box1 . DrawItem += new DrawItemEventHandler(combo_box1_DrawItem); this . combo_box1 . DropDownClosed += new EventHandler(combo_box1_DropDownClosed); this . combo_box1 . MouseLeave += new EventHandler(combo_box1_Leave); void combo_box1_DrawItem( object sender, DrawItemEventArgs e) { if (e . Index < 0 ) { return ; } string text = combo_box1 . GetItemText(combo_box1 . Items[e . Index