●ベジェ曲線を描く ●線のスタイルを指定する
JavaScriptで二次ベジェ曲線、三次ベジェ曲線を作り、canvas要素内に描画します。
（グリッドは 20px ）
onload = function() {
linetest();
};
function linetest() {
var cnvs = document.getElementById('canvas1');
var ctx = cnvs.getContext('2d');
/* 二次ベジェ曲線＿1本目 */
ctx.beginPath();
/* 始点の座標 */
ctx.moveTo(30, 30);
/* 二次ベジェ曲線（quadraticCurveTo(cpx, cpy, x, y)） */
ctx.quadraticCurveTo(80, 130, 130, 30);
/* 色指定無しで書き出すとデフォルトの黒になる */
ctx.stroke();
/* 二次ベジェ曲線＿2本目 */
ctx.beginPath();
ctx.moveTo(30, 100);
ctx.quadraticCurveTo(130, 180, 130, 100);
ctx.stroke();
/* 二次ベジェ曲線と直線で、角丸四角形を描く */
ctx.beginPath();
ctx.moveTo(150, 40);
/* 多角形の各頂点を二次ベジェ曲線の制御点に指定する */
ctx.quadraticCurveTo(150, 30, 160, 30);
ctx.lineTo(240, 30);
ctx.quadraticCurveTo(250, 30, 250, 40);
ctx.lineTo(250, 120);
ctx.quadraticCurveTo(250, 130, 240, 130);
ctx.lineTo(160, 130);
ctx.quadraticCurveTo(150, 130, 150, 120);
/* closePath で始点まで直線を引く */
ctx.closePath();
ctx.strokeStyle = '#FF7373';
ctx.stroke();
/* ちなみに、円弧と直線で、角丸四角形を描く */
ctx.beginPath();
ctx.moveTo(280, 30);
/* 直線に接する円弧を描く（arcTo(x1, y1, x2, y2, radius)） */
ctx.arcTo(370, 30, 370, 40, 10);
ctx.arcTo(370, 130, 360, 130, 10);
ctx.arcTo(270, 130, 270, 120, 10);
ctx.arcTo(270, 30, 280, 30, 10);
ctx.fillStyle = '#ff9';
ctx.globalAlpha = 0.5;/*塗りだけ透明度50％にする*/
ctx.fill();
ctx.globalAlpha = 1;/*透明度を100％に戻す*/
ctx.strokeStyle = '#FFBF00';
ctx.lineWidth = 5;
ctx.stroke();
/* 三次ベジェ曲線＿1本目 */
ctx.beginPath();
ctx.moveTo(400, 30);
ctx.bezierCurveTo(415, 100, 485, 100, 500, 30);
ctx.lineWidth = 1;
ctx.strokeStyle = '#00D900';
ctx.stroke();
/* 三次ベジェ曲線＿2本目 */
ctx.beginPath();
ctx.moveTo(400, 110);
ctx.bezierCurveTo(450, 160, 450, 60, 500, 110);
ctx.strokeStyle = '#4DD2FF';
ctx.stroke();
/* 三次ベジェ曲線＿応用＿花びらを描く */
ctx.beginPath();
ctx.moveTo(539, 128);
ctx.bezierCurveTo(536, 62, 593, 13, 658, 71);
ctx.bezierCurveTo(624, 128, 568, 67, 539, 128);
/* グラデーションで塗る */
var gra = ctx.createLinearGradient(540,40, 660,40);
gra.addColorStop(0,'#CC8EF6');
gra.addColorStop(0.6,'#FFD5DD');
gra.addColorStop(1,'#FFECEB');
ctx.fillStyle = gra;
ctx.fill();
/* 線も指定 */
ctx.lineWidth = 2;
ctx.strokeStyle = '#B973FF';
ctx.stroke();
/* 線を1本追加 */
ctx.beginPath();
ctx.moveTo(539, 128);
ctx.bezierCurveTo(543, 94, 558, 75, 574, 67);
ctx.strokeStyle = '#B973FF';
ctx.stroke();
}
左側の線は、太さの指定（lineWidth）と、先端のスタイル（lineCap）を指定しています。
右側は、線の接合部分のスタイル（lineJoin）。
onload = function() {
linestyle();
};
function linestyle() {
var cnvs2 = document.getElementById('canvas2');
var ctx2 = cnvs2.getContext('2d');
/* デフォルト（太さは1px、先端は butt、色は黒） */
ctx2.beginPath();
ctx2.moveTo(30, 20);
ctx2.lineTo(190, 20);
ctx2.stroke();
/* 線幅の指定（lineWidth） */
ctx2.lineWidth = 10;
ctx2.beginPath();
ctx2.moveTo(30, 40);
ctx2.lineTo(190, 40);
ctx2.stroke();
/* 線端のスタイルの指定（lineCap） */
ctx2.lineWidth = 20;
/* 'butt'（初期値。始点、終点でぶつ切り） */
ctx2.beginPath();
ctx2.moveTo(30, 80);
ctx2.lineTo(190, 80);
ctx2.lineCap = 'butt';
ctx2.stroke();
/* 'round'（始点、終点を中心点にした円でまとめる） */
ctx2.beginPath();
ctx2.moveTo(30, 110);
ctx2.lineTo(190, 110);
ctx2.lineCap = 'round';
ctx2.stroke();
/* 'square'（始点、終点を中心点にした正方形でまとめる） */
ctx2.beginPath();
ctx2.moveTo(30, 140);
ctx2.lineTo(190, 140);
ctx2.lineCap = 'square';
ctx2.stroke();
/* 線の接合部分のスタイル（lineJoin） */
/* 'miter'（初期値。角が尖っている） */
ctx2.beginPath();
ctx2.moveTo(305, 25);
ctx2.lineTo(245, 25);
ctx2.lineTo(245, 85);
ctx2.lineJoin = 'miter'; /* この指定省略しても同じ */
ctx2.stroke();
/* 'round'（丸く面取りする） */
ctx2.beginPath();
ctx2.moveTo(340, 55);
ctx2.lineTo(280, 55);
ctx2.lineTo(280, 115);
ctx2.lineJoin = 'round';
ctx2.stroke();
/* 'bevel'（直線で面取りする） */
ctx2.beginPath();
ctx2.moveTo(375, 85);
ctx2.lineTo(315, 85);
ctx2.lineTo(315, 145);
ctx2.lineJoin = 'bevel';
ctx2.stroke();
}
最初の線は、lineJoin = 'bevel' です。
2番目は、lineJoin = 'miter' 。尖った部分の三角形が伸び過ぎて邪魔です。
3番目は、miterLimit を指定して、尖った三角形部分を無効にしました。
（グリッドは 20px ）
onload = function() {
linemiter();
};
function linemiter() {
var cnvs3 = document.getElementById('canvas3');
var ctx3 = cnvs3.getContext('2d');
ctx3.lineWidth = 20;
/* 接合部分が'bevel' */
ctx3.beginPath();
ctx3.moveTo(0, 20);
ctx3.lineTo(200, 45);
ctx3.lineTo(0, 70);
ctx3.lineJoin = 'bevel';
ctx3.stroke();
/* 接合部分が'miter' */
ctx3.beginPath();
ctx3.moveTo(0, 95);
ctx3.lineTo(200, 120);
ctx3.lineTo(0, 145);
ctx3.lineJoin = 'miter';
ctx3.stroke();
/* miterLimit を指定 */
ctx3.beginPath();
ctx3.moveTo(0, 170);
ctx3.lineTo(200, 195);
ctx3.lineTo(0, 220);
ctx3.lineJoin = 'miter';
ctx3.miterLimit = 2.0;
ctx3.stroke();
}
miter 限界長は「 lineWidth ÷ 2 × miterLimit」。
miterLimit はデフォルトが10.0。線幅 (lineWidth) が 20pxなら、miter 限界長は 100pxになり、
それを越えなければ尖った三角形は表示されます。
miterLimit を2.0にすると、同じ線幅で、miter 限界長は 20pxになり、これを越える場合は、尖った三角形そのものが無効（= bevel と同じ状態）になります。