JSFiddle - React, Tailwind, and code Playground

by Sudheer Nunna

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fabric.js Interactive Text Example</title>
  <!-- Include Fabric.js library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.6.0/fabric.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="600" height="400" style="border:1px solid #ccc;"></canvas>

  <script>
    // Initialize Fabric.js canvas
    const canvas = new fabric.Canvas('canvas');

    // Function to add interactive text at the clicked position
    function addInteractiveText(event) {
      const text = new fabric.IText('Click to edit', {
        left: event.clientX - canvas.upperCanvasEl.getBoundingClientRect().left,
        top: event.clientY - canvas.upperCanvasEl.getBoundingClientRect().top,
        fontFamily: 'Arial',
        fontSize: 18,
        fill: 'black',
      });

      // Enable text editing on click
      text.on('mousedown', function () {
        this.enterEditing();
        this.selectAll();
      });

      // Update canvas
      canvas.add(text).setActiveObject(text);
      canvas.renderAll();
    }

    // Add event listener for canvas click
    canvas.on('mouse:down', function (event) {
      addInteractiveText(event.e);
    });
  </script>
</body>
</html>