canvas での描画位置がズレてしまうのを解決したい。

Question

やりたいこと

Javascript において取得した時間、要素の幅をもとにスタート位置を定め、適当な位置にcanvasで描画したいです。
具体的には、
（現在時刻）/（１日の秒数：86400）* （要素の幅：722px）
という式で、その時刻におけるスタート位置を決めています。

困っていること

コンソールで確認したところ、時間、要素の幅、スタートポイントは全てあっているのですが、実際に描画される位置は全く違うところになってしまいます。

例えば下の画像はスタートポイントを200に指定した場合です。本来は原点(０のところ）から200pxのところから描画開始してほしいのですが（8と10の間あたり）、かなりズレてしまっています。(16の右上から描画されている）

var canvas1 = document.getElementById("myCanvas1");
var ctx1 = canvas1.getContext("2d");
let client_w = document.getElementById("myCanvas1").clientWidth;
var e = new Date();
var time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds()); //3600
var startpoint = (time/86400)*client_w;
startpoint = 200;
var cw = client_w/86400*0.5

console.log(client_w);
console.log(startpoint);
console.log(time);
console.log(cw);


  $(function (){


    function abc(){
      
      

      var e = new Date();
      time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds());
      console.log(time);

/*

      if (time == 86399){
        console.log("in the if");
        startpoint = 0;
        ctx1.clearRect(0, 30, client_w, 60)
      }
*/
      
      ctx1.fillRect(startpoint, 30, cw, 60);
      startpoint = startpoint + cw;    

<div class="row" style="margin-bottom: 20px; margin-top: 5px; margin-right: 5px;">
    <div class="col-md-12" style="padding-right: 0px; padding-left: 5px;">
      <div class="row" style="padding-right: 5px; padding-left: 10px;  margin-left: 5px;">

        <div class="col-md-12">
          <div class="row">
            <div class="col-md-2 black_style1">
             <div class="container">
               <p class="text_style6" id="result1"></p>
             </div>
            </div>
            <div class="col-md-2 black_style1">
              <div class="text_style6">
                <input type="text" style="width: 50px; height: 15px; margin: -10px;" id="result1" onkeydown="machineOrder('1',event)">
              </div>
            </div>
            <div class="col-md-2 black_style1">
              <div class="text_style6" id="result1"></div>
            </div>
            <div class="col-md-2 black_style1">
              <div class="text_style6" id="result1"></div>
            </div>
            <div class="col-md-2 black_style1">
              <div class="text_style6" id="result2"></div>
            </div>
            
          </div>
          <div class="row">
            <div class="col-md-12 black_style2">
              <div style="width: 100%;" >
                <div style="height: 30px;" >
                    <div style="height: 10px;" id="chart1">
                  <canvas class="canvas_style" id="myCanvas1"></canvas>
                    </div>
                </div>
                <div style="display:flex;justify-content: space-between;">
                  <div class="text_style1">0</div>
                  <div class="text_style1">2</div>
                  <div class="text_style1">4</div>
                  <div class="text_style1">6</div>
                  <div class="text_style1">8</div>
                  <div class="text_style1">10</div>
                  <div class="text_style1">12</div>
                  <div class="text_style1">14</div>
                  <div class="text_style1">16</div>
                  <div class="text_style1">18</div>
                  <div class="text_style1">20</div>
                  <div class="text_style1">22</div>
                  <div class="text_style1">24</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

2点注意して下さい。1点は、スタイルシートで指定するcanvas要素の見た目の横幅とwidthプロパティで指定する描画領域の横幅が違う概念だということです。例えば、スタイルシートで200pxを指定してwidthプロパティで100pxを指定した場合、ちょうど2倍の大きさに図が引き伸ばされます。
Canvas.width - キャンパスの横幅を取得、変更する

もしかしたらこちらが参考になるかもしれません。