From c03a7dc5dd5123c49f9f880d68a576d8b1141f04 Mon Sep 17 00:00:00 2001
From: BrightCove <brightcove@no-reply@oldgate.org>
Date: Wed, 29 Jan 2025 23:43:26 -0800
Subject: [PATCH] Add canvas-annotate-2.js

---
 canvas-annotate-2.js | 54 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 canvas-annotate-2.js

diff --git a/canvas-annotate-2.js b/canvas-annotate-2.js
new file mode 100644
index 0000000..ab501b1
--- /dev/null
+++ b/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));
+});