Drawing Canvas & Paint App

<div class="canvas-card">
  <div class="canvas-toolbar">
    <input type="color" id="brush-color" value="#8b5cf6" title="Brush Color">
    <div class="tool-group">
      <label>Size: <span id="size-val">5</span>px</label>
      <input type="range" id="brush-size" min="1" max="40" value="5">
    </div>
    <button id="eraser-btn" class="tool-btn" title="Eraser"><i class="fas fa-eraser"></i></button>
    <button id="clear-btn" class="tool-btn" title="Clear Canvas"><i class="fas fa-trash-alt"></i></button>
    <button id="download-canvas-btn" class="tool-btn primary" title="Save Artwork"><i class="fas fa-download"></i></button>
  </div>
  <canvas id="paint-canvas"></canvas>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  background: #0f172a;
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.canvas-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 24px;
  padding: 20px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0f172a;
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.canvas-toolbar input[type="color"] {
  border: none;
  background: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.85rem;
  flex: 1;
}
.tool-group input[type="range"] {
  accent-color: #8b5cf6;
}
.tool-btn {
  background: #334155;
  border: none;
  color: #f8fafc;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-btn.active { background: #8b5cf6; }
.tool-btn.primary { background: #10b981; }
#paint-canvas {
  background: #ffffff;
  border-radius: 14px;
  width: 100%;
  height: 300px;
  display: block;
  cursor: crosshair;
}

const canvas = document.getElementById('paint-canvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('brush-color');
const sizeSlider = document.getElementById('brush-size');
const sizeVal = document.getElementById('size-val');
const eraserBtn = document.getElementById('eraser-btn');
const clearBtn = document.getElementById('clear-btn');
const downloadBtn = document.getElementById('download-canvas-btn');

let isDrawing = false;
let isEraser = false;

function resizeCanvas() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.addEventListener('load', resizeCanvas);

function startDraw(e) {
  isDrawing = true;
  ctx.beginPath();
  draw(e);
}

function stopDraw() {
  isDrawing = false;
  ctx.beginPath();
}

function draw(e) {
  if (!isDrawing) return;
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  ctx.lineWidth = sizeSlider.value;
  ctx.lineCap = 'round';
  ctx.strokeStyle = isEraser ? '#ffffff' : colorPicker.value;

  ctx.lineTo(x, y);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(x, y);
}

canvas.addEventListener('mousedown', startDraw);
canvas.addEventListener('mouseup', stopDraw);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseleave', stopDraw);

sizeSlider.addEventListener('input', (e) => {
  sizeVal.textContent = e.target.value;
});

eraserBtn.addEventListener('click', () => {
  isEraser = !isEraser;
  eraserBtn.classList.toggle('active', isEraser);
});

clearBtn.addEventListener('click', () => {
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
});

downloadBtn.addEventListener('click', () => {
  const link = document.createElement('a');
  link.download = 'my-drawing.png';
  link.href = canvas.toDataURL();
  link.click();
});