
<!DOCTYPE html>
<html>
<head>
  <title>Live Image Text Editor</title>
  <style>
    body {
      display: flex;
      font-family: sans-serif;
      margin: 0;
    }
    .editor {
      width: 40%;
      padding: 20px;
      border-right: 1px solid #ccc;
    }
    .preview {
      width: 60%;
      padding: 20px;
    }
    .text-block {
      margin-bottom: 20px;
      border: 1px solid #ddd;
      padding: 10px;
    }
    canvas {
      border: 1px solid #000;
      max-width: 100%;
    }
  </style>
</head>
<body>

<div class="editor">
  <h2>Edit Text</h2>
  <div id="textBlocks"></div>
  <button onclick="addTextBlock()">Add Text</button>
</div>

<div class="preview">
  <h2>Live Preview</h2>
  <canvas id="canvas"></canvas>
</div>

<script>
let textBlocks = [];

function addTextBlock() {
  const index = textBlocks.length;
  const container = document.createElement("div");
  container.className = "text-block";

  container.innerHTML = `
    <label>Text:</label><br>
    <input type="text" id="text${index}" value="Sample Text"><br>
    <label>Size:</label>
    <input type="number" id="size${index}" value="20"><br>
    <label>Color:</label>
    <input type="color" id="color${index}" value="#FFFFFF"><br>
    <label>X:</label>
    <input type="number" id="x${index}" value="50">
   <label>Y:</label>
<input type="number" id="y${index}" value="50"><br>
<label>Font Weight:</label>
<select id="weight${index}">
  <option value="normal">Normal</option>
  <option value="bold">Bold</option>
  <option value="lighter">Lighter</option>
  <option value="bolder">Bolder</option>
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="600">600</option>
  <option value="700">700</option>
  <option value="800">800</option>
  <option value="900">900</option>
</select>

    <button onclick="removeTextBlock(${index})">Remove</button>
  `;

  document.getElementById("textBlocks").appendChild(container);

  textBlocks.push(index);

  // Add listeners to update canvas on change
['text', 'size', 'color', 'x', 'y', 'weight'].forEach(field => {

    document.getElementById(`${field}${index}`).addEventListener('input', drawCanvas);
  });

  drawCanvas();
}

function removeTextBlock(index) {
  textBlocks = textBlocks.filter(i => i !== index);
  document.getElementById("textBlocks").children[index].remove();
  drawCanvas();
}

function drawCanvas() {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  // Load image
  const img = new Image();
  img.src = "images/withdrawal.png";

  img.onload = () => {
    // Set canvas size to match image size
    canvas.width = img.width;
    canvas.height = img.height;

    // Draw original-size image
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);

   // Draw each text block
textBlocks.forEach(i => {
  const text = document.getElementById(`text${i}`).value;
  const size = parseInt(document.getElementById(`size${i}`).value);
  const color = document.getElementById(`color${i}`).value;
  const x = parseInt(document.getElementById(`x${i}`).value);
  const y = parseInt(document.getElementById(`y${i}`).value);
  const weight = document.getElementById(`weight${i}`).value;

  ctx.fillStyle = color;
  ctx.font = `${weight} ${size}px Arial`;
  ctx.fillText(text, x, y);
});

  }
}


// Add one block by default
addTextBlock();
</script>

</body>
</html>
