캔버스 화살표가 Chrome에 표시되지 않습니다.

Question

아래 코드를 사용하여 캔버스에 화살표를 그렸습니다.

window.onload = function() { 
    var canvas = document.getElementById("arrow"); 
    var context = canvas.getContext("2d"); 

    context.beginPath(); 
    context.strokeStyle = "red"; 
    context.fillStyle = "red"; 

    context.moveTo(150, 400); 
    context.lineTo(400, 400); 
    context.lineTo(375, 375); 
    context.arcTo(400, 400, 375, 425, 35); 

    context.lineTo(400, 400); 
    context.stroke(); 
    context.fill(); 
    }); 

그러나 화살표는 화면에 표시되지 않습니다.

Answer 1

HTML5 spec에서 canvas 요소의 기본 좌표 크기는 300x150 픽셀입니다. 당신이 필요로하는 http://jsfiddle.net/Mh4uH/

(300, 150) 캔버스의 오른쪽 아래는 여전히 있도록

당신이 말에 캔버스의 크기를 조정하기 위해 CSS를 사용하는 경우, 500 × 500 픽셀은, 다음 캔버스 좌표가 뻗어됩니다 또한 캔버스 width 및 height 재산 신청 :

: 또는

<canvas id="arrow" width="500" height="500"></canvas> 

을, 당신은 화면의 크기 (http://jsfiddle.net/Mh4uH/1/)와 일치하는 폭과 높이를 설정 자바 스크립트를 사용할 수 있습니다

참고 : canvas default size