このページでは、「JSXGraph」というJavaScriptライブラリを利用して多角形（Polygon）を描くJavaScriptコードの書き方をまとめてみたいと思います。
なお、JSXGraphの基本的な使い方は「JavaScriptでオブジェクトを描く」のほうにまとめています。
ここでは多角形（Polygon）を描くコードの部分だけ取り上げます。
まずいくつかの描画結果のサンプルを示します。
最初の例（１番目の例）は何も多角形ついての属性を指示をせずにエレメントタイプに'polygon'を指定してPolygonオブジェクトを生成したものです。
var p1 = board1.create('Polygon', [[0,0], [-1,1],[1,2],[2,-1],[-2,-2]]);
多角形の頂点の座標を順番に並べて頂点の数だけ指定します。直接座標値を書くのではなくPointオブジェクトを指定することもできます。
デフォルトでは上の例（の左端）のように頂点のPointオブジェクトが表示され、多角形の内側も塗りつぶされた状態になります。
２番目の例はこれに対して多角形のストロークだけを描いたものです。
{
label: {visible:false,},
vertices: {visible:false,},
fillColor: 'transparent',
}
);
頂点のそばにラベル（Pointオブジェクトのname属性）を表示させない指定（これはデフォルト）、頂点のPointオブジェクトを表示させない指定、内側（フィル）を透明にする指定を行っています。
頂点を非表示にする属性はちょっと注意が必要です。「vertices」と複数になっているので配列変数なのかな？と思いきや、これは「全てのverticesに共通の属性をPointオブジェクトの属性として指定するもの」という意味合いのようです。だから属性の指定（例えばvisible:false）は１つのPointオブジェクトに対して行うように記述するようです。
３番目の例は典型的な例として各頂点にラベルを表示したものです。
var v2 = board3.create('point',[-1,1],{name: 'B', size: 0, label: {offset: [-10,-10]}});
var v3 = board3.create('point',[1,2],{name: 'C', size: 0, label: {offset: [3,3]}});
var v4 = board3.create('point',[2,-1],{name: 'D', size: 0, label: {offset: [3,3]}});
var v5 = board3.create('point',[-2,-2],{name: 'E', size: 0, label: {offset: [-10,-10]}});
var p3 = board3.create('Polygon', [v1,v2,v3,v4,v5],
{
label: {visible:true,},
vertices: {visible:false,},
fillColor: 'transparent',
}
);
上に書いたように「vertices」というPolygonの属性では頂点に共通の属性しか指定できないようなので、あらかじめ頂点ごとのPointオブジェクトを作っておいて、これを使ってPolygonオブジェクトを生成します。
面倒なのは各Pointのラベルの表示位置です。ラベルの表示位置はLabelオブジェクトのいろんな属性でいろんな指定方法があるようなのですが、こうしておけば良さげに表示される指定の仕方がなかなかありません。ここは手っ取り早く多角形の形に応じて頂点ごとに適宜ちょうどよいoffsetを設定してみました。