<div class="graph-box">
  <canvas id="js_canvas" width="200" height="200"></canvas>
  <p class="chart-data">
    <span class="count" id="js_percent">67</span>
  </p>
</div>

.graph-box {
  margin-top: 50px;
  position: relative;
  display: flex;
  justify-content: center;

  .chart-data {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #1689c8;
    margin: 0;
  }

  .count {
    display: block;
    font-size: 45px;

    &:after {
      font-size: 36px;
      content: "%";
    }
  }
}

// グラフ
const canvas = document.getElementById("js_canvas");

// ラジアンを返す関数
const getRadian = (degree) => {
  // ラジアン = 角度 * Math.PI / 180;
  return degree * Math.PI / 180;
};

const progressGraph = () => {
  const percentText = document.getElementById("js_percent");
  const ctx = canvas.getContext("2d");

  let posX = canvas.width / 2,
      posY = canvas.height / 2,
      percent = 0, // 初期値
      onePercent = 360 / 100, // 360度を1とする
      result = onePercent * 67; // 67%

  const drawCanvas = () => {
    let counts = 0;

    const arcInterval = () => {
      if (counts <= result) {
        counts += 1;
        // キャンバスを初期化
        // void ctx.clearRect(x, y, width, height);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        percent = counts / onePercent;

        percentText.innerHTML = percent.toFixed();

        // 背面の描画開始
        ctx.beginPath();
        ctx.strokeStyle = "#eff7fb";
        ctx.lineWidth = 15;
        // 円弧
        // void ctx.arc(x, y, radius, startAngle, endAngle [, counterclockwise]);
        ctx.arc(
          posX, // 中心のx座標
          posY, // 中心のy座標
          90, // 半径
          0, // 開始角度
          2 * Math.PI, // 終了角度 => 360度
          false // 描く方向（時計回り）
        );
        ctx.stroke();

        // 前面
        ctx.beginPath();
        ctx.strokeStyle = "#1689c8";
        ctx.lineWidth = 15;
        ctx.arc(
          posX,
          posY,
          90,
          getRadian(270),
          getRadian(270 + counts),
          false
        );
        ctx.stroke();

        // 描画
        requestAnimationFrame(arcInterval);
      }
    };
    // 再帰呼び出し
    arcInterval();
  };
  
  // 描画実行
  drawCanvas();
};

progressGraph();