はじめに

最近、お絵かきアプリの実装に興味を持ち、そこでHTMLのCanvasという機能を知りました。Canvasを活用すると、直感的な描画機能が簡単に実装できます。この記事では、HTMLと JavaScriptを使って実装したコードを紹介しながら、解説していきます。

Canvas とは？

Canvasは、HTML5で導入された要素の一つで、ブラウザ上でグラフィックの描画を行うための機能です。2Dグラフィックスやアニメーション、ゲームなどをブラウザ内で実装することが可能になり、いろいろなインタラクティブコンテンツを手軽に作ることができます。

今回の実装の概要

今回のコードでは、以下のような機能を実装しています。

ブラウザ上に 1 つの Canvas を表示
マウスのドラッグ操作で線を描画
マウスの左ボタンを離したり、Canvas からマウスが外れたタイミングで描画を終了
リセットボタンを押すと、Canvas を初期状態にクリア

ソースコード

以下が今回実装したサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>最小限のCanvasサンプル</title>
  <style>
    /* Canvasの枠線を見やすくするために設定 */
    #canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <h1>Canvasでお絵描き</h1>
  <canvas id="canvas" width="500" height="400"></canvas>
  <br>
  <button id="resetButton">リセット</button>

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

    let drawing = false;

    // マウスを押したときに描画開始
    canvas.addEventListener('mousedown', (e) => {
      drawing = true;
      ctx.beginPath();
      ctx.moveTo(e.offsetX, e.offsetY);
    });

    // マウスを動かしている間、線を描く
    canvas.addEventListener('mousemove', (e) => {
      if (!drawing) return; 
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
    });

    // マウスを離したら描画終了
    canvas.addEventListener('mouseup', () => {
      drawing = false;
    });

    // マウスがCanvasの外に出た場合も描画終了
    canvas.addEventListener('mouseleave', () => {
      drawing = false;
    });

    // リセットボタンを押すとCanvasをクリア
    resetButton.addEventListener('click', () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    });
  </script>
</body>
</html>

実行結果

上記のコードを .html ファイルとして保存しブラウザで開くとこんな感じでマウスで絵を描くことができます。

おわりに

今回、HTMLのCanvasを使って最小限の機能でお絵かきアプリを実装してみました。
めちゃくちゃ簡単でしたね！！
今後はもっと複雑な機能を持ったアプリにカスタマイズしてみたいと思ってます。そのときはまた記事に。

この記事が参考になりましたらぜひ「いいね」「フォロー」など励みになるのでよろしくお願いします！