<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>お絵かきアプリ</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    canvas {
      border: 2px solid black;
    }
    
    #toolbar {
      background-color: #f7f7f7;
      padding: 10px;
    }
    
    button {
      margin-right: 10px;
    }
  </style>
</head>

<body>

  <div id="toolbar">
    <button id="pencil">鉛筆</button>
    <button id="eraser">消しゴム</button>
    <input type="number" id="stroke-width" min="1" max="50" step="1" value="5"> 太さ
    <input type="color" id="stroke-color" value="#000000"> 色

  </div>
  <canvas id="canvas"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const pencilButton = document.getElementById('pencil');
    const eraserButton = document.getElementById('eraser');
    const strokeWidthInput = document.getElementById('stroke-width');
    const strokeColorInput = document.getElementById('stroke-color');

    // Set canvas size to window size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Default stroke style
    context.strokeStyle = strokeColorInput.value;
    context.lineWidth = strokeWidthInput.value;

    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    function startDrawing(e) {
      isDrawing = true;
      [lastX, lastY] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
    }

    function draw(e) {
      if (!isDrawing) return;
      const [x, y] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];

      context.beginPath();
      context.moveTo(lastX, lastY);
      context.lineTo(x, y);
      context.stroke();
      [lastX, lastY] = [x, y];
    }

    function endDrawing() {
      isDrawing = false;
    }

    function setStrokeStyle() {
      context.strokeStyle = strokeColorInput.value;
      context.lineWidth = strokeWidthInput.value;
    }

    function enablePencilMode() {
      canvas.removeEventListener('mousedown', startErasing);
      canvas.removeEventListener('mousemove', erase);
      canvas.removeEventListener('mouseup', endErasing);
      canvas.addEventListener('mousedown', startDrawing);
      canvas.addEventListener('mousemove', draw);
      canvas.addEventListener('mouseup', endDrawing);

      context.globalCompositeOperation = 'source-over';
      pencilButton.classList.add('active');
      eraserButton.classList.remove('active');
    }

    function startErasing(e) {
      isDrawing = true;
      [lastX, lastY] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
    }

    function erase(e) {
      if (!isDrawing) return;
      const [x, y] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];

      context.beginPath();
      context.moveTo(lastX, lastY);
      context.lineTo(x, y);
      context.globalCompositeOperation = 'destination-out';
      context.stroke();
      [lastX, lastY] = [x, y];
    }

    function endErasing() {
      isDrawing = false;
    }

    function enableEraserMode() {
      canvas.removeEventListener('mousedown', startDrawing);
      canvas.removeEventListener('mousemove', draw);
      canvas.removeEventListener('mouseup', endDrawing);
      canvas.addEventListener('mousedown', startErasing);
      canvas.addEventListener('mousemove', erase);
      canvas.addEventListener('mouseup', endErasing);

      context.globalCompositeOperation = 'destination-out';
      eraserButton.classList.add('active');
      pencilButton.classList.remove('active');
    }

    setStrokeStyle();
    enablePencilMode();

    pencilButton.addEventListener('click', enablePencilMode);
    eraserButton.addEventListener('click', enableEraserMode);
    strokeWidthInput.addEventListener('change', setStrokeStyle);
    strokeColorInput.addEventListener('change', setStrokeStyle);

    console.log(`Why did the tomato turn red? Because it saw the salad dressing!`);
  </script>

</body>

</html>