impr(screenshot): switch to modern-screenshot for enhancements (@byseif21) (monkeytypegame#6884)

Switching the screenshot library from html2canvas to modern-screenshot.
for both visual for users and some technical/codebase benefits.

### Visual Improvements :
 * Background css filters now shows in the screenshot. 
   fix: monkeytypegame#6862 , 
        monkeytypegame#1613 ,

monkeytypegame#6249 (comment)
* Sharper, higher-quality screenshots noticeably especially on high-DPI
screens.
* Backgrounds now render correctly on small screens that were previously
missing on mobile or small viewports, now included and properly scaled.
* Previously, with extra height e.g input history opened, the background
failed to cover everything even when it should have.
* The screenshot now more closely matches what users actually see across
devices and layouts.

### Non-Visual (Technical/Codebase) Improvements :
* Supporting modern css makes us now able to use css for the heatmap
instead of the JS.
     monkeytypegame#5892 ,
      monkeytypegame#5879
  * Reduced bundle size: Dropping html2canvas and its dependencies.
  * Up-to-date library, easier future improvements.

---------

Co-authored-by: Samuel Hautamäki <[email protected]>
Co-authored-by: samuelhautamaki <[email protected]>
Co-authored-by: Miodec <[email protected]>

Author: 4 people

frontend/.eslintrc.cjs

@@ -6,7 +6,6 @@ module.exports = {
   globals: {
     $: "readonly",
     jQuery: "readonly",
-    html2canvas: "readonly",
     ClipboardItem: "readonly",
     grecaptcha: "readonly",
   },

frontend/package.json

@@ -96,13 +96,13 @@
     "firebase": "12.0.0",
     "hangul-js": "0.2.6",
     "howler": "2.2.3",
-    "html2canvas": "1.4.1",
     "idb": "8.0.3",
     "jquery": "3.7.1",
     "jquery-color": "2.2.0",
     "jquery.easing": "1.4.1",
     "konami": "1.7.0",
     "lz-ts": "1.1.2",
+    "modern-screenshot": "4.6.5",
     "object-hash": "3.0.0",
     "slim-select": "2.9.2",
     "stemmer": "2.0.1",

frontend/src/styles/animations.scss

@@ -1,17 +1,12 @@
 @keyframes loader {
   0% {
-    width: 0;
-    left: 0;
+    transform: translateX(-100%) scaleX(0);
   }
-
   50% {
-    width: 100%;
-    left: 0;
+    transform: translateX(0) scaleX(1);
   }
-
   100% {
-    width: 0;
-    left: 100%;
+    transform: translateX(100%) scaleX(0);
   }
 }
 

frontend/src/ts/elements/loader.ts

@@ -1,5 +1,5 @@
+const element = $("#backgroundLoader");
 let timeout: NodeJS.Timeout | null = null;
-
 let visible = false;
 
 function clearTimeout(): void {
@@ -9,17 +9,23 @@ function clearTimeout(): void {
   }
 }
 
-export function show(): void {
+export function show(instant = false): void {
   if (visible) return;
-  timeout = setTimeout(() => {
-    $("#backgroundLoader").stop(true, true).show();
-  }, 125);
-  visible = true;
+
+  if (instant) {
+    element.stop(true, true).show();
+    visible = true;
+  } else {
+    timeout = setTimeout(() => {
+      element.stop(true, true).show();
+    }, 125);
+    visible = true;
+  }
 }
 
 export function hide(): void {
   if (!visible) return;
   clearTimeout();
-  $("#backgroundLoader").stop(true, true).fadeOut(125);
+  element.stop(true, true).fadeOut(125);
   visible = false;
 }

frontend/src/ts/test/test-screenshot.ts

@@ -12,10 +12,6 @@ import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import * as Notifications from "../elements/notifications";
 import { convertRemToPixels } from "../utils/numbers";
 
-async function gethtml2canvas(): Promise<typeof import("html2canvas").default> {
-  return (await import("html2canvas")).default;
-}
-
 let revealReplay = false;
 let revertCookie = false;
 
@@ -48,15 +44,16 @@ function revert(): void {
   }
 }
 
-let firefoxClipboardNotificatoinShown = false;
+let firefoxClipboardNotificationShown = false;
 
 /**
- * Prepares UI, generates screenshot canvas using html2canvas, and reverts UI changes.
+ * Prepares UI, generates screenshot canvas using modern-screenshot, and reverts UI changes.
  * Returns the generated canvas element or null on failure.
  * Handles its own loader and basic error notifications for canvas generation.
  */
 async function generateCanvas(): Promise<HTMLCanvasElement | null> {
-  Loader.show();
+  const { domToCanvas } = await import("modern-screenshot");
+  Loader.show(true);
 
   if (!$("#resultReplay").hasClass("hidden")) {
     revealReplay = true;
@@ -110,7 +107,7 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
   }
 
   (document.querySelector("html") as HTMLElement).style.scrollBehavior = "auto";
-  window.scrollTo({ top: 0, behavior: "instant" as ScrollBehavior }); // Use instant scroll
+  window.scrollTo({ top: 0, behavior: "auto" });
 
   // --- Target Element Calculation ---
   const src = $("#result .wrapper");
@@ -120,40 +117,117 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
     revert();
     return null;
   }
-  // Ensure offset calculations happen *after* potential layout shifts from UI prep
-  await new Promise((resolve) => setTimeout(resolve, 50)); // Small delay for render updates
+  await Misc.sleep(50); // Small delay for render updates
 
   const sourceX = src.offset()?.left ?? 0;
   const sourceY = src.offset()?.top ?? 0;
   const sourceWidth = src.outerWidth(true) as number;
   const sourceHeight = src.outerHeight(true) as number;
+  const paddingX = convertRemToPixels(2);
+  const paddingY = convertRemToPixels(2);
 
-  // --- Canvas Generation ---
   try {
-    const paddingX = convertRemToPixels(2);
-    const paddingY = convertRemToPixels(2);
-
-    const canvas = await (
-      await gethtml2canvas()
-    )(document.body, {
+    // Compute full-document render size to keep the target area in frame on small viewports
+    const root = document.documentElement;
+    const { scrollWidth, clientWidth, scrollHeight, clientHeight } = root;
+    const targetWidth = Math.max(scrollWidth, clientWidth);
+    const targetHeight = Math.max(scrollHeight, clientHeight);
+
+    // Target the HTML root to include .customBackground
+    const fullCanvas = await domToCanvas(root, {
       backgroundColor: await ThemeColors.get("bg"),
-      width: sourceWidth + paddingX * 2,
-      height: sourceHeight + paddingY * 2,
-      x: sourceX - paddingX,
-      y: sourceY - paddingY,
-      logging: false, // Suppress html2canvas logs in console
-      useCORS: true, // May be needed if user flags/icons are external
+      // Sharp output
+      scale: window.devicePixelRatio ?? 1,
+      style: {
+        width: `${targetWidth}px`,
+        height: `${targetHeight}px`,
+        overflow: "hidden", // for scrollbar in small viewports
+      },
+      // Fetch (for custom background URLs)
+      fetch: {
+        requestInit: { mode: "cors", credentials: "omit" },
+        bypassingCache: true,
+      },
+
+      // skipping hidden elements (THAT IS SO IMPORTANT!)
+      filter: (el: Node): boolean => {
+        if (!(el instanceof HTMLElement)) return true;
+        const cs = getComputedStyle(el);
+        return !(el.classList.contains("hidden") || cs.display === "none");
+      },
+      // Normalize the background layer so its negative z-index doesn't get hidden
+      onCloneEachNode: (cloned) => {
+        if (cloned instanceof HTMLElement) {
+          const el = cloned;
+          if (el.classList.contains("customBackground")) {
+            el.style.zIndex = "0";
+            el.style.width = `${targetWidth}px`;
+            el.style.height = `${targetHeight}px`;
+            // for the inner image scales
+            const img = el.querySelector("img");
+            if (img) {
+              // (<= 720px viewport width) wpm & acc text wrapper!!
+              if (window.innerWidth <= 720) {
+                img.style.transform = "translateY(20vh)";
+                img.style.height = "100%";
+              } else {
+                img.style.width = "100%"; // safety nothing more
+                img.style.height = "100%"; // for image fit full screen even when words history is opened with many lines
+              }
+            }
+          }
+        }
+      },
     });
 
-    revert(); // Revert UI *after* canvas is successfully generated
+    // Scale and create output canvas
+    const scale = fullCanvas.width / targetWidth;
+    const paddedWidth = sourceWidth + paddingX * 2;
+    const paddedHeight = sourceHeight + paddingY * 2;
+
+    const scaledPaddedWCanvas = Math.round(paddedWidth * scale);
+    const scaledPaddedHCanvas = Math.round(paddedHeight * scale);
+    const scaledPaddedWForCrop = Math.ceil(paddedWidth * scale);
+    const scaledPaddedHForCrop = Math.ceil(paddedHeight * scale);
+
+    const canvas = document.createElement("canvas");
+    canvas.width = scaledPaddedWCanvas;
+    canvas.height = scaledPaddedHCanvas;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      Notifications.add("Failed to get canvas context for screenshot", -1);
+      return null;
+    }
+
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+
+    // Calculate crop coordinates with proper clamping
+    const cropX = Math.max(0, Math.floor((sourceX - paddingX) * scale));
+    const cropY = Math.max(0, Math.floor((sourceY - paddingY) * scale));
+    const cropW = Math.min(scaledPaddedWForCrop, fullCanvas.width - cropX);
+    const cropH = Math.min(scaledPaddedHForCrop, fullCanvas.height - cropY);
+
+    ctx.drawImage(
+      fullCanvas,
+      cropX,
+      cropY,
+      cropW,
+      cropH,
+      0,
+      0,
+      canvas.width,
+      canvas.height
+    );
     return canvas;
   } catch (e) {
     Notifications.add(
       Misc.createErrorMessage(e, "Error creating screenshot canvas"),
       -1
     );
-    revert(); // Ensure UI is reverted on error
     return null;
+  } finally {
+    revert(); // Ensure UI is reverted on both success and error
   }
 }
 
@@ -192,9 +266,9 @@ export async function copyToClipboard(): Promise<void> {
       // Firefox specific message (only show once)
       if (
         navigator.userAgent.toLowerCase().includes("firefox") &&
-        !firefoxClipboardNotificatoinShown
+        !firefoxClipboardNotificationShown
       ) {
-        firefoxClipboardNotificatoinShown = true;
+        firefoxClipboardNotificationShown = true;
         Notifications.add(
           "On Firefox you can enable the asyncClipboard.clipboardItem permission in about:config to enable copying straight to the clipboard",
           0,