see code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Drawing Pad</title>
<style>
body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #ffafbd, #ffc3a0);
font-family: 'Comic Sans MS', cursive, sans-serif;
text-align: center;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
h1 {
color: #ff6b6b;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.canvas-container {
border: 3px solid #4ecdc4;
border-radius: 10px;
margin: 20px 0;
background: white;
position: relative;
}
canvas {
display: block;
cursor: crosshair;
background: white;
}
.tools {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 15px 0;
}
.color-btn {
width: 30px;
height: 30px;
border: 2px solid #333;
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s;
}
.color-btn:hover {
transform: scale(1.2);
}
.color-btn.active {
border: 3px solid gold;
box-shadow: 0 0 8px gold;
}
.tool-btn {
padding: 8px 15px;
border: 2px solid #4ecdc4;
background: white;
border-radius: 25px;
cursor: pointer;
font-family: inherit;
font-weight: bold;
color: #333;
transition: all 0.3s;
}
.tool-btn:hover {
background: #4ecdc4;
color: white;
}
.tool-btn.active {
background: #ff6b6b;
color: white;
border-color: #ff6b6b;
}
.brush-size {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
justify-content: center;
}
.size-display {
font-weight: bold;
color: #ff6b6b;
min-width: 40px;
}
input[type="range"] {
width: 150px;
}
.instructions {
background: #ffeaa7;
padding: 10px;
border-radius: 10px;
margin: 15px 0;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 Colorful Drawing Pad 🎨</h1>
<div class="instructions">
<p>Draw anything you like! Choose colors, change brush size, and use the eraser when needed!</p>
</div>
<div class="tools">
<div class="color-btn active" style="background: #ff0000;" data-color="#ff0000"></div>
<div class="color-btn" style="background: #0000ff;" data-color="#0000ff"></div>
<div class="color-btn" style="background: #00ff00;" data-color="#00ff00"></div>
<div class="color-btn" style="background: #ffff00;" data-color="#ffff00"></div>
<div class="color-btn" style="background: #ff00ff;" data-color="#ff00ff"></div>
<div class="color-btn" style="background: #00ffff;" data-color="#00ffff"></div>
<div class="color-btn" style="background: #000000;" data-color="#000000"></div>
<div class="color-btn" style="background: #ffffff; border-color: #ccc;" data-color="#ffffff"></div>
</div>
<div class="brush-size">
<span>Brush Size:</span>
<input type="range" id="brushSize" min="1" max="50" value="5">
<span class="size-display" id="sizeDisplay">5px</span>
</div>
<div class="tools">
<button class="tool-btn active" id="drawBtn">✏️ Draw</button>
<button class="tool-btn" id="eraserBtn">🧽 Eraser</button>
<button class="tool-btn" id="clearBtn">🗑️ Clear All</button>
<button class="tool-btn" id="saveBtn">💾 Save</button>
</div>
<div class="canvas-container">
<canvas id="drawingCanvas" width="760" height="400"></canvas>
</div>
</div>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
const brushSize = document.getElementById('brushSize');
const sizeDisplay = document.getElementById('sizeDisplay');
const drawBtn = document.getElementById('drawBtn');
const eraserBtn = document.getElementById('eraserBtn');
const clearBtn = document.getElementById('clearBtn');
const saveBtn = document.getElementById('saveBtn');
const colorBtns = document.querySelectorAll('.color-btn');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let currentColor = '#ff0000';
let currentTool = 'draw';
function resizeCanvas() {
const container = canvas.parentElement;
canvas.width = container.clientWidth - 6;
canvas.height = 400;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = getCoordinates(e);
}
function draw(e) {
if (!isDrawing) return;
const [x, y] = getCoordinates(e);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = brushSize.value;
if (currentTool === 'draw') {
ctx.strokeStyle = currentColor;
ctx.globalCompositeOperation = 'source-over';
} else {
ctx.strokeStyle = 'white';
ctx.globalCompositeOperation = 'destination-out';
}
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
[lastX, lastY] = [x, y];
}
function stopDrawing() {
isDrawing = false;
}
function getCoordinates(e) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
let clientX, clientY;
if (e.type.includes('touch')) {
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
} else {
clientX = e.clientX;
clientY = e.clientY;
}
return [
(clientX - rect.left) * scaleX,
(clientY - rect.top) * scaleY
];
}
function updateBrushSize() {
sizeDisplay.textContent = brushSize.value + 'px';
}
function setActiveColor(colorBtn) {
colorBtns.forEach(btn => btn.classList.remove('active'));
colorBtn.classList.add('active');
currentColor = colorBtn.dataset.color;
}
function setActiveTool(tool) {
drawBtn.classList.remove('active');
eraserBtn.classList.remove('active');
if (tool === 'draw') {
drawBtn.classList.add('active');
currentTool = 'draw';
} else {
eraserBtn.classList.add('active');
currentTool = 'eraser';
}
}
function clearCanvas() {
if (confirm('Are you sure you want to clear your drawing?')) {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
}
function saveDrawing() {
const link = document.createElement('a');
link.download = 'my-drawing.png';
link.href = canvas.toDataURL();
link.click();
}
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
startDrawing(e);
});
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
draw(e);
});
canvas.addEventListener('touchend', stopDrawing);
brushSize.addEventListener('input', updateBrushSize);
colorBtns.forEach(btn => {
btn.addEventListener('click', () => setActiveColor(btn));
});
drawBtn.addEventListener('click', () => setActiveTool('draw'));
eraserBtn.addEventListener('click', () => setActiveTool('eraser'));
clearBtn.addEventListener('click', clearCanvas);
saveBtn.addEventListener('click', saveDrawing);
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
updateBrushSize();
</script>
</body>
</html>