HTML5 Canvas drawing basic line. 그게 버그 야?

Question

나는 html5에 간단한 줄을 그리고 다음과 같은 문제점을 발견했다.

아래 코드는 훌륭하게 작동합니다. 제대로

topcanvas = document.getElementById("topborder"); 
topcontext = topcanvas.getContext("2d"); 

topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height); 
    topcontext.moveTo(1, 0); 
    topcontext.lineTo(4,0); 
    topcontext.lineWidth = 3; 
topcontext.strokeStyle = "#ff0000"; 
topcontext.stroke(); 

은 아래 코드는 어떻게해야 선을 그립니다 정확히 동일하지만, 그것은 첫 선을 그립니다 그리고 내가 어떤 변화를 볼 해달라고 이유는 확실하지 않다. 출력은 (4,0)

topcanvas = document.getElementById("topborder"); 
topcontext = topcanvas.getContext("2d"); 

    topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height); 
    topcontext.moveTo(1000, 0); 
    topcontext.lineTo(4,0); 
    topcontext.lineWidth = 3; 
topcontext.strokeStyle = "#ff0000"; 
topcontext.stroke(); 

topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height); 
    topcontext.moveTo(1, 0); 
    topcontext.lineTo(4,0); 
    topcontext.lineWidth = 3; 
topcontext.strokeStyle = "#ff0000"; 
topcontext.stroke(); 

캔버스 폭 1000 및 I에 대한 최종 결과로 예상대로 (4,0) (1,0) 내지 (1000,0)로부터 라인 캔버스를 지우려면 높이 3

Answer 1

는 다음을 수행하십시오

topcanvas.width=topcanvas.width;