Update static/js/script.js

static/js/script.js

@@ -194,7 +194,21 @@ class Whiteboard {
     })
     .then(response => response.json())
     .then(data => {
-        document.getElementById('result').innerText = data.message;
+
+        if (data.status && Array.isArray(data.data)) {
+          data.data.forEach(item => {
+            const result = item.result;
+            const x = item.location.x;
+            const y = item.location.y;
+            const size = item.size;
+            const sizePx = `${size}px`;
+            writeOnCanvasDynamic(whiteboard.pages, result, x, y, null, "Arial", sizePx, "black", false);
+          });
+        } else {
+          console.error("Invalid data object or empty data array");
+        }
+
+        document.getElementById('result').innerText = data.text;
     })
     .catch(error => {
         console.error('Error:', error);
@@ -261,4 +275,33 @@ document.addEventListener('keydown', function(event) {
       link.click();
       console.log("Canvas saved as image with white background!");
   }
-});
+});
+
+function writeOnCanvasDynamic(pagesInstance, text, x, y, fontUrl, fontFamily, fontSize = "16px", color = "black", clear = false) {
+  const ctx = pagesInstance.ctx;
+  if (!ctx) return;
+
+  const applyFontAndWrite = () => {
+    ctx.globalCompositeOperation = 'source-over'; 
+    if (clear) {
+        const textWidth = ctx.measureText(text).width;
+        const lineHeight = parseInt(fontSize, 10) || 16;
+        ctx.clearRect(x, y - lineHeight, textWidth, lineHeight);
+        return;
+    }
+    ctx.font = `${fontSize} ${fontFamily}`;
+    ctx.fillStyle = color;
+    ctx.fillText(text, x, y);
+  };
+  if (fontUrl) {
+      const fontFace = new FontFace(fontFamily, `url(${fontUrl})`);
+      fontFace.load().then((loadedFont) => {
+          document.fonts.add(loadedFont);
+          applyFontAndWrite();
+      }).catch((err) => {
+          console.error("Font loading failed:", err);
+      });
+  } else {
+      applyFontAndWrite();
+  }
+}