JSFiddle - React, Tailwind, and code Playground

by mikapon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.2/fabric.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/customiseControls.js"></script>
<canvas id="canvas"></canvas>

JavaScript

const canvas = new fabric.Canvas("canvas");
    fabric.Canvas.prototype.customiseControls(
      {
        tl: {
          action: "rotate",
          cursor: "pointer"
        },
        tr: {
          action: "scale"
        },
        bl: {
          action: "remove",
          cursor: "pointer"
        }
      },
      function() {
        canvas.renderAll();
      }
    );

    fabric.Object.prototype.setControlsVisibility({
      mt: false,
      ml: false,
      mr: false,
      mb: false,
      br: false
    });

    fabric.Object.prototype.customiseCornerIcons({
      settings: {
        borderColor: "black",
        cornerSize: 25,
        cornerShape: "circle",
        cornerBackgroundColor: "white",
        cornerPadding: 10
      },
      tl: {
        icon: "//use.fontawesome.com/releases/v5.0.9/svgs/solid/redo-alt.svg"
      },
      tr: {
        icon:
          "//use.fontawesome.com/releases/v5.0.9/svgs/solid/expand-arrows-alt.svg"
      },
      bl: {
        icon: "//use.fontawesome.com/releases/v5.0.9/svgs/regular/trash-alt.svg"
      }
    });

    const rect = new fabric.Rect({
      top: 100,
      left: 100,
      width: 70,
      height: 70,
      fill: "red"
    });

    rect.set({
      hasRotatingPoint: false
    });

    canvas.add(rect);
    canvas.setActiveObject(rect);