EzDraw

EzDraw

Simple little napkin sketch in JS. Thanks to Claude.ai and DeepSeek (for when Claude got confused.)

document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const drawBtn = document.getElementById('drawBtn');
const eraseBtn = document.getElementById('eraseBtn');
const saveBtn = document.getElementById('saveBtn');
const sizeSlider = document.getElementById('sizeSlider');
const sizeValue = document.getElementById('sizeValue');

// Default image URL
const defaultImageUrl = "./www/p/ezdraw/bg.jpg";

// Set canvas dimensions to be square and responsive
function resizeCanvas() {
    const size = Math.min(window.innerWidth - 20, 500);
    canvas.width = size;
    canvas.height = size;

    // Load and set the default background image
    loadDefaultBackground();
}

// Load and set the default background image
function loadDefaultBackground() {
    /*
    const img = new Image();
    img.crossOrigin = "Anonymous"; // Enable cross-origin access if needed

    img.onload = function() {
        // Draw the image onto the canvas, covering the entire canvas
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

    img.onerror = function() {
        console.error('Error loading default background image');
        // Optionally, set a fallback background color or pattern
        ctx.fillStyle = '#ffffff'; // Fallback white background
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    };

    img.src = defaultImageUrl; // Set the image source
    */
}

// Resize the canvas when the window is resized
window.addEventListener('resize', resizeCanvas);

// Initialize the canvas and load the default background
resizeCanvas();

// Initialize drawing variables
let isDrawing = false;
let mode = 'draw';
let size = 5;

// Event listeners for buttons
drawBtn.addEventListener('click', function() {
    mode = 'draw';
    drawBtn.classList.add('active');
    eraseBtn.classList.remove('active');
});

eraseBtn.addEventListener('click', function() {
    mode = 'erase';
    eraseBtn.classList.add('active');
    drawBtn.classList.remove('active');
});

// Save functionality
saveBtn.addEventListener('click', function() {
    // Create a temporary canvas to combine the background and drawing
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = canvas.width;
    tempCanvas.height = canvas.height;

    // Load the default background image
    const bgImage = new Image();
    bgImage.src = defaultImageUrl;
    bgImage.crossOrigin = "Anonymous"; // Enable cross-origin access if needed

    bgImage.onload = function() {
        // Draw the default background image onto the temporary canvas
        tempCtx.drawImage(bgImage, 0, 0, tempCanvas.width, tempCanvas.height);

        // Draw the current canvas (with drawings) onto the temporary canvas
        // Use 'source-over' to composite the drawing on top of the background
        tempCtx.globalCompositeOperation = 'source-over';
        tempCtx.drawImage(canvas, 0, 0);

        // Save the combined image
        const link = document.createElement('a');
        link.download = `drawing_${new Date().toISOString().slice(0, 10)}.png`; // Include date in filename
        link.href = tempCanvas.toDataURL('image/png');
        link.click();
    };

    bgImage.onerror = function() {
        console.error('Error loading background image for saving');
        // Fallback: Save only the canvas content if the background fails to load
        const link = document.createElement('a');
        link.download = `drawing_${new Date().toISOString().slice(0, 10)}.png`;
        link.href = canvas.toDataURL('image/png');
        link.click();
    };
});

// Size slider
sizeSlider.addEventListener('input', function() {
    size = this.value;
    sizeValue.textContent = size;
});

// Set initial size value
sizeValue.textContent = sizeSlider.value;

// Drawing functions
function startDrawing(e) {
    isDrawing = true;
    ctx.beginPath(); // Start a new path
    draw(e); // Draw the initial point
}

function stopDrawing() {
    isDrawing = false;
    ctx.beginPath(); // Reset the path
}

function draw(e) {
    if (!isDrawing) return;

    e.preventDefault();

    ctx.lineWidth = size;
    ctx.lineCap = 'round';

    if (mode === 'draw') {
        ctx.strokeStyle = '#000';
        ctx.globalCompositeOperation = 'source-over'; // Draw normally
    } else {
        ctx.globalCompositeOperation = 'destination-out'; // Erase by removing pixels
    }

    let x, y;

    // Handle both mouse and touch events
    if (e.type.includes('mouse')) {
        const rect = canvas.getBoundingClientRect();
        x = e.clientX - rect.left;
        y = e.clientY - rect.top;
    } else {
        const rect = canvas.getBoundingClientRect();
        x = e.touches[0].clientX - rect.left;
        y = e.touches[0].clientY - rect.top;
    }

    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath(); // Start a new path for the next segment
    ctx.moveTo(x, y); // Move to the new position
}

// Mouse events
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

// Touch events for mobile
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', stopDrawing);
});