// 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;
canvas.style.pointerEvents = 'none';
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.style.pointerEvents = 'auto';
});

canvas.addEventListener('mousemove', (e) => {
  if (drawing) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
  }
});

canvas.addEventListener('mouseup', () => {
  drawing = false;
  canvas.style.pointerEvents = 'none';
});

// 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));
});