Coloring Book
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Digital Coloring Book</title>
<body>
<div class="controls">
<label>Select Color: </label>
<input type="color" id="colorPicker" value="#ff0000">
<button class="color-btn" style="background-color: #ff0000" onclick="setColor('#ff0000')"></button>
<button class="color-btn" style="background-color: #00ff00" onclick="setColor('#00ff00')"></button>
<button class="color-btn" style="background-color: #0000ff" onclick="setColor('#0000ff')"></button>
<button class="color-btn" style="background-color: #ffff00" onclick="setColor('#ffff00')"></button>
<button onclick="clearCanvas()">Clear Canvas</button>
</div>
<script>
let currentColor = '#ff0000';
let img;
function preload() {
// Replace with your own line art image URL or data URL
img = loadImage('https://i.imgur.com/9Z2f0bL.png'); // Example placeholder line art
}
function setup() {
createCanvas(400, 400);
background(255);
image(img, 0, 0, 400, 400);
}
function draw() {
if (mouseIsPressed && mouseX >= 0 && mouseX < width && mouseY >= 0 && mouseY < height) {
noStroke();
fill(currentColor);
ellipse(mouseX, mouseY, 10, 10);
}
}
function setColor(color) {
currentColor = color;
document.getElementById('colorPicker').value = color;
}
function clearCanvas() {
background(255);
image(img, 0, 0, 400, 400);
}
document.getElementById('colorPicker').addEventListener('input', (e) => {
currentColor = e.target.value;
});
</script>
</body>
</html>