💖 Welcome to My Kawaii Room 💖
"Take a breath, baby girl. You're building something beautiful."
🎧 Spotify Playlist
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Touch Drawing Board</title> <style> body { margin: 0; display: flex; flex-direction: column; align-items: center; background-color: #f0f0f0; font-family: sans-serif; } canvas { border: 2px solid #333; touch-action: none; background: white; border-radius: 10px; } .controls { margin: 10px; } </style> </head> <body> <h2>🎨 لوØØ© رسم باللمس</h2> <div class="controls"> اللون: <input type="color" id="colorPicker" value="#000000" /> السماكة: <input type="range" id="sizePicker" min="1" max="20" value="5" /> <button onclick="clearCanvas()">مسØ</button> </div> <canvas id="drawingBoard" width="350" height="500"></canvas> <script> const canvas = document.getElementById('drawingBoard'); const ctx = canvas.getContext('2d'); const colorPicker = document.getElementById('colorPicker'); const sizePicker = document.getElementById('sizePicker'); let drawing = false; function getPos(e) { const rect = canvas.getBoundingClientRect(); if (e.touches) { return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top }; } else { return { x: e.clientX - rect.left, y: e.clientY - rect.top }; } } function startDrawing(e) { drawing = true; draw(e); } function stopDrawing() { drawing = false; ctx.beginPath(); } function draw(e) { if (!drawing) return; const pos = getPos(e); ctx.lineWidth = sizePicker.value; ctx.lineCap = 'round'; ctx.strokeStyle = colorPicker.value; ctx.lineTo(pos.x, pos.y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(pos.x, pos.y); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } // Mouse events canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mousemove', draw); // Touch events canvas.addEventListener('touchstart', startDrawing); canvas.addEventListener('touchend', stopDrawing); canvas.addEventListener('touchmove', draw); // Prevent scroll while drawing document.body.addEventListener("touchstart", (e) => { if (e.target === canvas) e.preventDefault(); }, { passive: false }); document.body.addEventListener("touchend", (e) => { if (e.target === canvas) e.preventDefault(); }, { passive: false }); document.body.addEventListener("touchmove", (e) => { if (e.target === canvas) e.preventDefault(); }, { passive: false }); </script> </body> </html>
