JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<canvas width="200" height="200" id="c1"></canvas>
<canvas width="200" height="200" id="c2"></canvas>

CSS

canvas {
    border:1px silver;
}

JavaScript

canvas1 = new fabric.Canvas('c1');
canvas2 = new fabric.Canvas('c2');

// this one works as expected
fabric.Image.fromURL('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', function (img) {
    canvas1.add(img);
    canvas2.add(img);
    
    canvas1.clipTo = function (ctx) {
        var triangle = new fabric.Triangle({
            width: 100,
            height: 150,
            left: 70,
            top: 100
        });
        triangle.render(ctx);
    }
    canvas1.renderAll();

// also using 
// note that external loading of svg causes some problems, so running this script locally will show different result - the svg file will be added to canvas but
    canvas2.clipTo = function (ctx) {
        var path = new fabric.Path('M62.022,30.848c4.251,0.038,9.565-2.206,13.424-3.924 c3.131-1.396,4.47-1.299,7.833,0.263c2.18,1.012,3.883-1.551,5.824-2.048c0.243-0.062,0.537,0.464,0.374,0.652 c-0.553,0.639-2.932,1.753-2.679,2.821c0.184,0.779,4.081,0.817,5.226,1.347c1.008,0.653-3.22,0.665-3.17,1.028 c1.038,0.191,2.175,0.279,3.03,0.703c0.482,0.238-0.707,0.815-1.245,0.731c0.194,0.103,0.711,0.257,0.583,0.436 c-0.144,0.891-3.265,0.128-4.132-0.003c-0.688-0.104-3.754-0.843-3.892,0.039c-0.092,0.586,0.47,1.079,0.133,2.617 c-0.314,1.438-1.942,1.633-1.831,1.024c0.273-1.496,1.201-1.914-0.4-3.564c-0.979-1.01-1.908-2.344-2.138-3.425 c-7.581,1.092-9.456,6.321-17.365,7.858c-2.787,0.541-5.233-1.016-7.887-2.27c0.168,0.259,0.457,0.272,0.169,1.184 c-0.29,0.918-0.479,2.081-0.225,3.104c0.539,2.169,1.73,4.464,2.5,6.755c1.481,4.415,0.996,11.273,0.42,15.21 c-0.105,0.715,0.497,1.432,0.129,2.608c-0.128,0.413,0.384,1.027,0.347,1.458c-0.195,2.236,1.106,2.01,3.446,4.502 c-0.21,0.252-0.926,0.504-1.136,0.756c4.353,5.205,8.404,10.612,11.622,16.651c0.805,1.512,1.511,3.199,1.511,4.913 c0,1.955-1.154,2.843-2.057,4.577c-0.741,1.423-2.081,2.305-3.121,3.526c-5.631,6.614-9.57,11.287-15.186,17.936...