Online Interactive Painting – Shirley Babcock Indigenous Art

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Paint the Hummingbird</title>
  <style>
    body { margin: 0; text-align: center; background: #f0f0f0; }
    canvas { border: 1px solid #ccc; cursor: crosshair; }
    .toolbar {
      margin: 10px;
      display: flex;
      justify-content: center;
      gap: 10px;
      align-items: center;
    }
  </style>
</head>
<body>

  <h2>Paint the Hummingbird!</h2>

  <div class="toolbar">
    <label>Brush Color: <input type="color" id="colorPicker" value="#000000"></label>
    <label>Brush Size: <input type="range" id="brushSize" min="1" max="30" value="5"></label>
    <button onclick="clearCanvas()">Clear</button>
  </div>

  <canvas id="paintCanvas" width="800" height="600"></canvas>

  <script>
    const canvas = document.getElementById('paintCanvas');
    const ctx = canvas.getContext('2d');
    const colorPicker = document.getElementById('colorPicker');
    const brushSize = document.getElementById('brushSize');

    let painting = false;

    // Load your SVG background
    const svgImage = new Image();
    svgImage.src = 'hummingbirdforonline.svg'; // Ensure this file is in the same folder
    svgImage.onload = () => ctx.drawImage(svgImage, 0, 0, canvas.width, canvas.height);

    function startPosition(e) {
      painting = true;
      draw(e);
    }

    function endPosition() {
      painting = false;
      ctx.beginPath();
    }

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

      ctx.lineWidth = brushSize.value;
      ctx.lineCap = 'round';
      ctx.strokeStyle = colorPicker.value;

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

    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(svgImage, 0, 0, canvas.width, canvas.height);
    }

    canvas.addEventListener('mousedown', startPosition);
    canvas.addEventListener('mouseup', endPosition);
    canvas.addEventListener('mousemove', draw);
  </script>

</body>
</html>