58 lines
1.4 KiB
Plaintext
58 lines
1.4 KiB
Plaintext
// 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));
|
|
});
|