1.2.4 HTML5 Canvas Line Cap Tutorial

http://www.html5canvastutorials.com/tutorials/html5-canvas-line-caps/

html5 canvas line에 cap을 추가 할 수 있다.
cap은 다음 셋중 하나를 선택할 수 있다; butt, round, square.

context.lineCap=[value];

아래 링크로 예제를 확인 할 수 있다.
http://www.html5canvastutorials.com/demos/tutorials/html5_canvas_line_caps/

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // butt line cap (top line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 - 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "butt";
    context.stroke();
 
    // round line cap (middle line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2);
    context.lineTo(canvas.width - 200, canvas.height / 2);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "round";
    context.stroke();
 
    // square line cap (bottom line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 + 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "square";
    context.stroke();
};