1 files changed, 16 insertions, 9 deletions

diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js
index 62666af..1fbbf7c 100644
--- a/js/inknswitch/ink.js
+++ b/js/inknswitch/ink.js
@@ -7,17 +7,20 @@ noteArea.value = localStorage.getItem('noteContent') || '';
 noteArea.style.width = '100vw';
 noteArea.style.height = '100vh';
 noteArea.style.boxSizing = 'border-box';
-noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
+noteArea.style.position = 'absolute';
+noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
+noteArea.style.zIndex = '1';
 
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
-canvas.style.position = 'fixed';
+canvas.style.position = 'absolute';
+canvas.style.zIndex = '0';
 
 let drawing = false;
 let prevX = 0;
 let prevY = 0;
 
-canvas.style.display = 'none';
+canvas.style.pointerEvents = 'none'; // Disable mouse events on the canvas
 
 const getCursorPosition = (e) => {
     const rect = canvas.getBoundingClientRect();
@@ -87,17 +90,21 @@ document.addEventListener('keydown', (e) => {
     // Cmd or Ctrl and D key to toggle modes
     if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
         e.preventDefault();
-        if (canvas.style.display === 'none') {
-            canvas.style.display = 'block';
-            noteArea.style.display = 'none';
+        if (canvas.style.pointerEvents === 'none') {
+            canvas.style.pointerEvents = 'auto';
+            noteArea.style.pointerEvents = 'none';
+            noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)';
+            noteArea.style.color = '#bbb';
         } else {
-            canvas.style.display = 'none';
-            noteArea.style.display = 'block';
+            canvas.style.pointerEvents = 'none';
+            noteArea.style.pointerEvents = 'auto';
+            noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
+            noteArea.style.color = 'black';
         }
     }
 
     // C key to clear the canvas
-    if (e.key === 'c' && canvas.style.display === 'block') {
+    if (e.key === 'c' && canvas.style.pointerEvents === 'auto') {
         const confirmClear = confirm('Do you really want to clear the canvas?');
         if (confirmClear) {
             ctx.clearRect(0, 0, canvas.width, canvas.height);