Add canvas-annotate-2.js

canvas-annotate-2.js

@@ -0,0 +1,54 @@
+// Create canvas element
+const canvas = document.createElement('canvas');
+canvas.style.position = 'fixed';
+canvas.style.top = 0;
+canvas.style.left = 0;
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+canvas.style.zIndex = 1000;
+document.body.appendChild(canvas);
+
+// Create button element
+const button = document.createElement('button');
+button.textContent = 'Close Canvas';
+button.style.position = 'fixed';
+button.style.top = '10px';
+button.style.right = '10px';
+button.style.zIndex = 1001;
+document.body.appendChild(button);
+
+// Drawing on canvas
+const ctx = canvas.getContext('2d');
+let drawing = false;
+
+canvas.addEventListener('mousedown', (e) => {
+  drawing = true;
+  ctx.beginPath();
+  ctx.moveTo(e.clientX, e.clientY);
+});
+
+canvas.addEventListener('mousemove', (e) => {
+  if (drawing) {
+    ctx.lineTo(e.clientX, e.clientY);
+    ctx.stroke();
+  }
+});
+
+canvas.addEventListener('mouseup', () => {
+  drawing = false;
+});
+
+// Fade-out animation
+function fadeOut(element, callback) {
+  element.style.transition = 'opacity 0.5s';
+  element.style.opacity = 0;
+  setTimeout(() => {
+    if (callback) callback();
+  }, 500);
+}
+
+// Close and delete canvas on button click
+button.addEventListener('click', () => {
+  fadeOut(canvas, () => document.body.removeChild(canvas));
+  fadeOut(button, () => document.body.removeChild(button));
+});