JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<canvas id="can" width="400" height="400" style="border:1px solid #000000;"></canvas>
    
<button id="aligntext" onclick="rightAlignText()">Right Align</button>

JavaScript

var canvasRef = window._canvas = new fabric.Canvas('can');
canvasRef.renderOnAddition = true;
            
var textObject = new fabric.IText("textValue \ntext Value test text \nValue", {
    left: 150,
    top: 100,
    width: 150,
    height: 100,     
    fontSize:16,    
    fill: '#000000'                        
 }); 
                
canvasRef.add(textObject);  
             
//Group text and rectangle
var rectangle = new fabric.Rect({
    width: 100, 
    height: 100, 
    fill: '#ffcc12',
    opacity: 1
 });
                
var textObject = new fabric.IText("Bharat\nasdsa\nasdasda", {
    left: 0,
    top: 0,                                      
   // fontWeight: 'bold',                       
    fontSize: 20,
    textAlign: 'center',
    fill: '#000000',
    originX: 'center',
    originY: 'center'
 }); 
                
var textObjectGroup = new fabric.Group([ rectangle, textObject ], {
    left: 150,
    top: 150                     
 });
                
canvasRef.add(textObjectGroup);  
             
function rightAlignText()
{   
    var selectedObj = canvasRef.getActiveObject();
    if(selectedObj.type === 'group')
    {
        var textFromGroup = selectedObj._objects[1];
        textFromGroup.setTextAlign('right');
    }
    else
        selectedObj.setTextAlign('center');
                 
    canvasRef.renderAll(); 
    canvasRef.calcOffset(); 
}