kintoneでcanvas上のクリックをした位置に点を描画する

仕事で必要になったので勉強したソースコードのメモ。

(() => {
  "use strict";

  let kigou = "四角";

  kintone.events.on(
    ["app.record.create.show", "app.record.edit.show"],
    function (event) {
      const canvas = document.createElement("canvas");
      canvas.width = 100;
      canvas.height = 100;

      const record = event.record;
      // 座標
      let x = record.X.value;
      let y = record.Y.value;
      // canvasサイズ
      let w = canvas.width;
      let h = canvas.height;

      // 2次元の描画を行うメソッド
      const ctx = canvas.getContext("2d");
      const initCanvas = () => {
        // 背景塗る
        ctx.fillStyle = "#ccc";
        // fillRect(x座標, y座標, 幅, 高さ)
        ctx.fillRect(0, 0, w, h);

        // メモリ線を引く
        ctx.beginPath();
        ctx.moveTo(50, 0);
        ctx.lineTo(50, 100);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(0, 50);
        ctx.lineTo(100, 50);
        ctx.closePath();
        ctx.stroke();

        // 初期値（マイナス）のときは描画しない
        if (x >= 0 && y >= 0) {
          if (kigou === "四角") {
            // クリックされた位置に描画処理
            ctx.fillStyle = "#000";
            // fillRect(x座標, y座標, 幅, 高さ)
            ctx.fillRect(x, y, 10, 10);
          } else {
            ctx.beginPath();
            // 円の中心座標: クリック位置
            // 半径: 50
            // 開始角度: 0度 (0 * Math.PI / 180)
            // 終了角度: 360度 (360 * Math.PI / 180)
            // 方向: true=反時計回りの円、false=時計回りの円
            ctx.arc(x, y, 5, (0 * Math.PI) / 180, (360 * Math.PI) / 180, false);
            ctx.fillStyle = "#000";
            ctx.fill();
            ctx.closePath();
            ctx.stroke();
          }
        }
      };
      initCanvas();

      let onClick = (e) => {
        let rect = e.target.getBoundingClientRect();
        // e.clientX(Y)がwindow左上からのクリックされた座標
        // rect.left(top)がwindow左上からのcanvasの座標
        x = e.clientX - rect.left;
        y = e.clientY - rect.top;

        const rec = kintone.app.record.get();
        // フィールドに座標を格納
        rec.record.X.value = x;
        rec.record.Y.value = y;

        kintone.app.record.set(rec);

        draw();
      };

      const draw = () => {
        initCanvas();
      };

      canvas.addEventListener("click", onClick, false);

      // キャンバス上に十字を追加
      const div = document.createElement("div");
      div.setAttribute("class", "cross");
      canvas.appendChild(div);

      // スペース上にキャンバスを追加
      const space = kintone.app.record.getSpaceElement("graph");
      space.appendChild(canvas);
      return event;
    }
  );

  kintone.events.on(
    ["app.record.create.change.記号", "app.record.edit.change.記号"],
    function (event) {
      kigou = event.changes.field.value;
    }
  );
})();

実行結果

以下のサイトがとても参考になりました。
【javascript,HTML5】canvas上のクリックをした位置に点を描画する方法 | web関連 | 勉強ブログ「二色人日記。」