JSFiddle - React, Tailwind, and code Playground

by boulabiar

HTML

<canvas id="c" width="600" height="600"></canvas>

JavaScript

var canvas = this.__canvas = new fabric.Canvas('c');

var arrow = new fabric.Path('M121.32,0L44.58,0 C36.67,0,29.5,3.22,24.31,8.41 c-5.19,5.19-8.41,12.37-8.41,20.28 c0,15.82,12.87,28.69,28.69,28.69 c0,0,4.4, 0,7.48,0 C36.66,72.78,8.4,101.04,8.4,101.04 C2.98,106.45,0,113.66,0,121.32 c0,7.66,2.98,14.87,8.4,20.29l0,0 c5.42,5.42,12.62,8.4,20.28,8.4 c7.66,0,14.87 -2.98,20.29-8.4 c0,0,28.26-28.25,43.66-43.66 c0,3.08,0,7.48,0,7.48 c0,15.82, 12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4 c5.42-5.42,8.4-12.62,8.4 -20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29 C136.19,2.98,128.98,0,121.32,0 z');

var clonedArr = [].concat(arrow);
console.log("clone ", clonedArr[0].path);
var clone = new fabric.Path(clonedArr[0].path);

var endPath = arrow.path;
var arrow1 = new fabric.Path(endPath, {
    left: 0,
    top: 0,
    fill: 'blue',
    //selectable: false
  });
  canvas.add(arrow);
arrow.set('left', 10);

  //console.log("u ", arrow.path);
  //var clonedArrow = canvas.item(0).clone();
/*
 var clonedArr = arrow1.path.map(function(path){
    return fabric.util.object.clone(path);
  });
console.log("clone ", clonedArr);
*/
for (var i=0;i<arrow.path.length-1;i++)
{ 
for (var j=1;j<arrow.path[i].length-1;j++)
{ 
    //console.log("i= ", i , " ==");
    //console.log( "now", arrow.path[i][j]);
    arrow.path[i][j]+=(Math.random()-0.5)*5;
}
}
console.log(arrow.path);
canvas.add(clone);
//clonedArr.set('selectable', true);

canvas.add(arrow1);
console.log(arrow1.path);