canvasでクリックした座標に四角を描画する

JavaScript

このページ を見て、以下のように思ったんですね。

なのでちょっと触ってみます。

手始めに、canvas 内でクリックされた点に、半透明の青色の四角を書きましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Canvas Test</title>
    <style>
      /**
       * html body に設定される自然な
       * margin padding を除去する
       */
      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      canvas {
        background-color: #CCC;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400"height="400"></canvas>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
      'use strict';

      $(function() {
        /**
         * canvas 操作用の context を取得する。
         */
        function getCtx() {
          var canvas = document.getElementById('canvas');
          return canvas.getContext('2d');
        };

        /**
         * canvas 内のクリックした座標に青薄色の四角形を描画する
         */
        function drawRectAtClickedPos(ev) {
          // クリックした座標を取得する。
          var posX = ev.pageX,
              posY = ev.pageY;
          var ctx = getCtx();

          // クリックした箇所に半透明の青色の四角を描画する。
          ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
          ctx.fillRect(posX, posY, 36, 18);
        };

        // canvas のクリックに紐付ける。
        $('canvas').click(drawRectAtClickedPos);
      });
          </script>
  </body>
</html>

いやー、自然な margin padding は怖い。

参照

クリックした座標の取得方法を参照。

クリックした座標がブラウザ毎にバラバラなの。jQuery は偉大。