JSFiddle - React, Tailwind, and code Playground

by rahulr

HTML

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

JavaScript

const canvas = new fabric.Canvas('canvas')
const logoContainer = new fabric.Path("M146 10.4781C123.169 12.451 100.771 18.4269 81 30.2967C-4.06308 81.3654 -14.9654 206.448 63.0008 269.395C77.5052 281.105 94.1907 290.057 112 295.584C129.883 301.133 149.336 303.244 168 301.588C189.419 299.688 210.368 293.354 229 282.58C244.488 273.625 258.269 261.988 269.434 248C332.797 168.616 296.172 47.2383 199 16.7231C182.152 11.4322 163.632 8.95453 146 10.4781z");

logoContainer.set({
  name: 'clipperPath',
  stroke: 'red',
  fill: 'transparent',
  strokeWidth: 2,
  selectable: false,
  strokeDashedArray: [5, 5],
});
canvas.add(logoContainer)
fabric.Image.fromURL('https://szcdn.ragalahari.com/june2019/posters/tridha-choudhury-seven-pm/tridha-choudhury-seven-pm7t.jpg', function(ol) {
  const logo = ol.set({
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    clipTo(ctx) {
      const retina = canvas._isRetinaScaling() ? fabric.devicePixelRatio : 1; // eslint-disable-line
      ctx.save();
      ctx.setTransform(retina, 0, 0, retina, 0, 0);
      logoContainer.render(ctx);
      ctx.restore();
    }
  })
  canvas.add(logo)
  logo.bringToFront();
  setTimeout(() => {
    canvas.renderAll();
  }, 100);
})
canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var zoom = canvas.getZoom();
  zoom = zoom + delta/200;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.setZoom(zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
})