HTML5 では、自前の二次元描画ができるようになった。 <canvas id="canvassample" width="600" height="600"></canvas> のようにして canvas の属性を宣言する。 以下適宜 canvas のページ (www.w3.org) を参照する。
線の幅。１以上の整数。
線の両端の形。butt, round, square のいずれかのみ指定可能。
butt は英和辞典で見るといろいろな意味があるが、ここでは（動詞で）突き出る、（名詞で）頭突きの意味であろう。
つまり、両端をかぶせているおおい（cap）から突き出ている、別の言い方をすればおおいがない状態と解釈すればいい。
折線で折れた点の形。bevel, round, miter のいずれかのみ指定可能。
bevel は（木など）に斜角をつける、斜めに切る、という意味が辞書に載っている。いわゆる「（直線状の）面取り」のことであろう。
miter は miter joint で留め継ぎという意味である。
これは、厚みのある板の 2 枚を断面斜め 45 度に切り、両者を張り合わせて直角（ 90 度）の形状を作ることである。
この lineJoin の指定では、面取りなしでとがっている、という意味と解する。次の miterLimit も参照のこと。
line join が miter の場合、とがり具合をこの数字で指定する。0 より大きい数字のみ適用される。 デフォルトは 10 。具体的な比率の定義については不明。 数字についての私の仮説はこうである。直線幅まで面取りされていれば 10 、まったく面取りがない状態を 1 として、 その間を内外挿しているのではないか。
下の canvas は、lineWidth をいずれも 20 とした場合の折れ線。 左から、bevel, round, miter (miterLimit=5)、miter (miterLimit=1) 。右２つはどちらも miter であるが、 この中間は普段使っているブラウザ SeaMonkey では描画できなかった。実験したところ、4.5 あたりが境界である。
点線の形状を指定する。