🖨️ {
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();
}