webでお絵かきアプリ

# はじめに
とりあえずプログラムを載せときます。HTMLとCSSが一緒になったやつ。結構な時間をかけて作ったので
## いいねを押してくれると嬉しいです。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
    }

    canvas {
      border: 1px solid black;
    }

    #tools {
      display: flex;
      margin-top: 10px;
    }

    button {
      margin: 0 5px;
      padding: 5px 10px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
 <title>お絵かきアプリ</title>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <div id="tools">
    <input type="color" id="colorPicker">
    <input type="range" id="penSize" min="1" max="20" value="5">
    <button id="eraser">消しゴム</button>
    <input type="range" id="eraserSize" min="5" max="50" value="20">
    <button id="clear">全消去</button>
  </div>

  <script>
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");
    let painting = false;
    let color = "black";
    let erasing = false;
    let penSize = 5;

    canvas.addEventListener("mousedown", startPainting);
    canvas.addEventListener("mouseup", stopPainting);
    canvas.addEventListener("mousemove", draw);

    document.getElementById("colorPicker").addEventListener("change", e => {
      color = e.target.value;
      erasing = false;
    });

    document.getElementById("eraser").addEventListener("click", () => {
      color = "white";
      erasing = true;
      penSize = document.getElementById("eraserSize").value;
    });

    document.getElementById("penSize").addEventListener("input", e => {
      penSize = e.target.value;
      erasing = false;
    });

    document.getElementById("eraserSize").addEventListener("input", e => {
      penSize = e.target.value;
      if (erasing) {
        erasing = true;
      }
    });

    document.getElementById("clear").addEventListener("click", clearCanvas);

    function startPainting(event) {
      painting = true;
      draw(event);
    }

    function stopPainting() {
      painting = false;
      context.beginPath();
    }

    function draw(event) {
      if (!painting) return;

      context.lineWidth = penSize;
      context.lineCap = "round";
      context.strokeStyle = color;

      if (erasing) {
        context.globalCompositeOperation = "destination-out";
      } else {
        context.globalCompositeOperation = "source-over";
      }

      context.lineTo(event.clientX - canvas.getBoundingClientRect().left, event.clientY - canvas.getBoundingClientRect().top);
      context.stroke();
      context.beginPath();
      context.moveTo(event.clientX - canvas.getBoundingClientRect().left, event.clientY - canvas.getBoundingClientRect().top);
    }

    function clearCanvas() {
      if (confirm("本当に全ての描画を消去しますか？")) {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }
    }
  </script>
</body>
</html>

```
jsのプログラム
```js
const clickButton = document.getElementById("clickButton");
const countElement = document.getElementById("count");

let count = 0;

clickButton.addEventListener("click", () => {
  count++;
  countElement.textContent = count;

  if (count === 10) {
    alert("Congratulations! You won!");
    count = 0;
    countElement.textContent = count;
  }
});

```
このプログラムで質問がある方はコメント欄にお願いします。