HTML5 - div 내 캔버스 드로잉

Question

필자는 원하는대로 수평선을 그릴 수있는 코드 조각이 있습니다. 문제는 내가 그것을 사용할 때 확인을 그립니다.하지만 브라우저 창을 늘리면 선의 위치가 바뀝니다. 나는 그것이 오른쪽으로 싸여 있다는 사실과 관련이 있다고 생각합니까? 나는 그렇게하려고했지만 어느 쪽도 효과가 없었습니다. 레이아웃과 정렬 된 라인이 정말로 필요합니다.

<canvas id="myCanvas" width="1250" height="120"></canvas> 

    <script> 

    var canvas = $("#myCanvas")[0]; 
    var c = canvas.getContext("2d"); 
    var amount = 0; 
    var startX = 164; 
    var startY = 120; 
    var endX = 1094; 
    var endY = 120; 

    setTimeout(function() { 
    var interval = setInterval(function() { 
     amount += 0.005; // change to alter duration 
     if (amount > 1) { 
      amount = 1; 
      clearInterval(interval); 
     } 
     c.clearRect(0, 0, canvas.width, canvas.height); 
     c.strokeStyle = "black"; 
     c.lineWidth=1; 
     c.strokeStyle="#707070"; 
     c.moveTo(startX, startY); 
     // lerp : a + (b - a) * f 
     c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount); 
     c.stroke(); 
    }, 0); 

}, 3000); 

</script> 

Answer 1

캔버스 크기를 조정하면 캔버스 그리기 크기가 자동으로 표시되는 사이트에 맞지 않습니다. 너 혼자해야 해.

나는 보통 내 캔버스 서랍 초기화 루틴이 그런 짓을 :

this.canvas = canvas; 
this.context = this.canvas.getContext("2d"); 
var _this = this; 
var setDim = function() { 
    _this.w = _this.canvas.clientWidth; 
    _this.h = _this.canvas.clientHeight; 
    _this.canvas.width = _this.w; 
    _this.canvas.height = _this.h; 
    _this.dimChanged = true; 
    _this.draw(); 
}; 
setDim(); 
$(window).resize(setDim);