<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,
      persent = 67, // 最終形態 => 67%
      onePersent = 360 / 100, // 360度 を1とみなす
      result =  onePersent * persent; // ラジアンを求める用
  
  // ラジアン
  const radianStart = getRadian(270);
  const radianEnd = getRadian(270 + result);
  
  // キャンバスを初期化
  // void ctx.clearRect(x, y, width, height);
  // ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 背景の描画開始
  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,
    radianStart,
    radianEnd,
    false
  );
  ctx.stroke();
};

progressGraph();