JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<canvas></canvas>

JavaScript

// clear canvas
canvas.clear();

var imgurl = "http://lavender-sandbox.myshopify.com/apps/lavender/imageserver/img_55a6c78f15d9b.jpg";

fabric.Image.fromURL(imgurl, function(img) {
    var oImg = img.set({ left: 50, top: 100 }).scale(0.4);
oImg.lockScalingX = oImg.lockScalingY  = oImg.lockRotation  = oImg.lockMovementY  = oImg.lockMovementX  = true ;
    oImg.hasBorders = oImg.hasControls = false;

    canvas.add(oImg).renderAll();
    canvas.centerObject(oImg);
    canvas.setActiveObject(oImg);

var fronttext = new fabric.Text( "hello", { 
        label : 'text',
        fontWeight: 'normal',
        textAlign: 'center',
        texttype : 0,
        left: 0,
        top: 0,
        width: 100,
        height: 50
    });
    
    fronttext.isBack = true;
    fronttext.lockScalingX = fronttext.lockScalingY   = false ;
    canvas.add(fronttext);
        //canvas.bringToFront(fronttext);
   
    canvas.centerObject(fronttext);
    canvas.setActiveObject(fronttext);
    canvas.renderAll().calcOffset();

  });