File size: 3,223 Bytes
aac4966 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | document.addEventListener('DOMContentLoaded', () => {
// Canvas setup
const canvas = document.getElementById('drawing-canvas');
const previewCanvas = document.getElementById('preview-canvas');
const ctx = canvas.getContext('2d');
const previewCtx = previewCanvas.getContext('2d');
// Resize canvases to match their display size
function resizeCanvases() {
const containerWidth = canvas.parentElement.clientWidth;
const displayHeight = window.innerWidth < 768 ? 400 : 500;
canvas.width = containerWidth;
canvas.height = displayHeight;
previewCanvas.width = containerWidth;
previewCanvas.height = displayHeight;
// Redraw any existing content
refreshPreview();
}
window.addEventListener('resize', resizeCanvases);
resizeCanvases();
// Drawing state
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let currentTool = 'pen';
let currentColor = '#000000';
let currentSize = 5;
// DOM Elements
const penBtn = document.getElementById('pen-btn');
const eraserBtn = document.getElementById('eraser-btn');
const colorPicker = document.getElementById('color-picker');
const brushSize = document.getElementById('brush-size');
const brushSizeValue = document.getElementById('brush-size-value');
const clearBtn = document.getElementById('clear-btn');
const uploadBtn = document.getElementById('upload-btn');
const imageUpload = document.getElementById('image-upload');
// Tool selection
penBtn.addEventListener('click', () => {
currentTool = 'pen';
penBtn.classList.add('tool-active');
eraserBtn.classList.remove('tool-active');
});
eraserBtn.addEventListener('click', () => {
currentTool = 'eraser';
eraserBtn.classList.add('tool-active');
penBtn.classList.remove('tool-active');
});
// Set initial active tool
penBtn.classList.add('tool-active');
// Color and size selection
colorPicker.addEventListener('input', (e) => {
currentColor = e.target.value;
});
brushSize.addEventListener('input', (e) => {
currentSize = e.target.value;
brushSizeValue.textContent = `${currentSize}px`;
});
// Clear canvas
clearBtn.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
});
// Upload image
uploadBtn.addEventListener('click', () => {
imageUpload.click();
});
imageUpload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (event) => {
const img = new Image();
img.onload = () => {
// Draw image to canvas
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
refreshPreview();
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
// Drawing functions |