🖨️ { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; function setColor(color) { brushColor = color; } canvas.addEventListener("mousedown", () => drawing = true); canvas.addEventListener("mouseup", () => drawing = false); canvas.addEventListener("mouseleave", () => drawing = false); canvas.addEventListener("mousemove", draw); canvas.addEventListener("touchstart", () => drawing = true); canvas.addEventListener("touchend", () => drawing = false); canvas.addEventListener("touchmove", drawTouch); function draw(e) { if (!drawing) return; ctx.fillStyle = brushColor; ctx.beginPath(); ctx.arc(e.offsetX, e.offsetY, brushSize, 0, Math.PI * 2); ctx.fill(); } function drawTouch(e) { if (!drawing) return; const rect = canvas.getBoundingClientRect(); const touch = e.touches[0]; ctx.fillStyle = brushColor; ctx.beginPath(); ctx.arc( touch.clientX - rect.left, touch.clientY - rect.top, brushSize, 0, Math.PI * 2 ); ctx.fill(); e.preventDefault(); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); } function downloadImage() { const link = document.createElement("a"); link.download = "spaztic-goat-coloring.png"; link.href = canvas.toDataURL("image/png"); link.click(); }
