Refactor canvas help tooltip for mask mode support

Split help tooltip content into standard and mask mode shortcuts. Tooltip now dynamically displays relevant shortcuts based on whether the mask tool is active, improving user guidance during mask editing.

js/CanvasView.js

@@ -284,7 +284,9 @@ async function createCanvasWidget(node, widget, app) {
 
     const helpTooltip = $el("div.painter-tooltip", {
         id: `painter-help-tooltip-${node.id}`,
-        innerHTML: `
+    });
+
+    const standardShortcuts = `
         <h4>Canvas Control</h4>
         <ul>
             <li><kbd>Click + Drag</kbd> - Pan canvas view</li>
@@ -321,8 +323,23 @@ async function createCanvasWidget(node, widget, app) {
             <li><kbd>Hold Shift</kbd> - Keep aspect ratio / Snap rotation to 15°</li>
             <li><kbd>Hold Ctrl</kbd> - Snap to grid</li>
         </ul>
-        `
+    `;
-    });
+
+    const maskShortcuts = `
+        <h4>Draw Mask Mode</h4>
+        <ul>
+            <li><kbd>Click + Drag</kbd> - Paint on the mask</li>
+            <li>Use the sliders to control brush <strong>Size</strong>, <strong>Strength</strong>, and <strong>Softness</strong>.</li>
+            <li><strong>Clear Mask</strong> will remove the entire mask.</li>
+            <li>The mask is applied to the final image composition.</li>
+            <li><kbd>Middle Mouse Button + Drag</kbd> - Pan canvas view</li>
+            <li><kbd>Mouse Wheel</kbd> - Zoom view in/out</li>
+        </ul>
+         <h4>Exiting Mask Mode</h4>
+        <ul>
+            <li>Click the "Draw Mask" button again to exit the mode.</li>
+        </ul>
+    `;
 
     document.body.appendChild(helpTooltip);
     const controlPanel = $el("div.painterControlPanel", {}, [
@@ -356,6 +373,11 @@ async function createCanvasWidget(node, widget, app) {
                         fontWeight: "bold",
                     },
                     onmouseenter: (e) => {
+                        if (canvas.maskTool.isActive) {
+                            helpTooltip.innerHTML = maskShortcuts;
+                        } else {
+                            helpTooltip.innerHTML = standardShortcuts;
+                        }
                         const rect = e.target.getBoundingClientRect();
                         helpTooltip.style.left = `${rect.left}px`;
                         helpTooltip.style.top = `${rect.bottom + 5}px`;