JSFiddle - React, Tailwind, and code Playground

by fahadnabbasi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
<canvas id="testcanvas" width="500" height="570"></canvas>

CSS

body {
    font-family: arial,helvetica;
}
#testcanvas {
    border: 3px solid #990000;
}

JavaScript

var imgPNG = new Image();
var imgJPG = new Image();
var canvas = new fabric.Canvas('testcanvas');
fabric.Object.prototype.objectCaching = false;
imgPNG.src = 'https://app.glorifyapp.com/uploads/api_icons/p1.png';
imgPNG.onload = function () {
    
    var imgElement = document.getElementById('testimage');
    var imgInstance = new fabric.Image(imgPNG, {
        left: 10,
        top: 10,
        scaleX:0.2,scaleY:0.2,
        angle: 0
    });
    imgInstance.setShadow({
        blur: 1,
        color: 'rgba(0,0,0)',
        offsetX: 50,
        offsetX: 50
    });
    
    canvas.add(imgInstance);
    
    
    canvas.renderAll();
    
};

imgJPG.src = 'https://app.glorifyapp.com/uploads/api_icons/57e2d1464d55aa14f6da8c7dda793f7c1237dde65a4c704c732678dd9e45c150_1280.jpg';
imgJPG.onload = function () {
    
    var imgElement = document.getElementById('testimage');
    var imgInstance = new fabric.Image(imgJPG, {
        left: 10,
        top: 300,
        scaleX:0.2,scaleY:0.2,
        angle: 0
    });
    imgInstance.setShadow({
        blur: 1,
        color: 'rgba(0,0,0)',
        offsetX: 50,
        offsetX: 50
    });
    
    canvas.add(imgInstance);
    
    
    canvas.renderAll();
    
};