■補講　中がくり抜かれた図形を描く
　本書の7章のCanvasではいくつかの描画メソッドについて解説しました。Canvasではパスを利用して図形を描きますが、その中で注意しないといけないことがあります。それが、ここで説明する中がくり抜かれた図形を描く場合です。


------------------------------------------------------------------------------------------------
■ワインディング規則（Even Odd Rule／偶奇ルール）
　Canvasなどパスを利用したものでは中がくり抜かれた図形を決めるのに、あるルールを使っています。このルールはいくつかありますが、Canvasで使われているのはワインディング規則というものです。これはEven Oddルールとも呼ばれます。

●Wiki
　http://en.wikipedia.org/wiki/Even-odd_rule

　これは図形のパスを描いた際のベクトルの方向が同じなら重なった部分をくり抜かない、ベクトルの方向が異なっている場合は重なった部分をくり抜くというものです。
　Canvasではarc()メソッドが時計回りに描画するか、反時計回りに描画するかを指定できます。これを利用して円の中身をくり抜くプログラムが以下のものです。
　実行すると円が重なった部分はくり抜かれているのがわかります。arc()メソッドの最後のパラメータを同じにしてみると、今度は円がくりぬかれずに重なっているのが分かります。（プログラムコードの一部のコメントを削除して試してください）



------------------------------------------------------------------------------------------------
■円をくり抜くプログラム
------------------------------------------------------------------------------------------------
window.addEventListener("load", function(){
	var canvasObj = document.getElementsByTagName("canvas")[0];
	var context = canvasObj.getContext("2d");
	if (!context){ return; }
	context.fillStyle = "black";
	context.fillRect(0,0,640,480);
	// 反時計回りで描画
	context.fillStyle = "red";
	context.arc(320,240,100, 0, Math.PI*2, true);
	//context.fill();	// 重なって描画されるかどうか試す場合は、この行頭の//を削除してください。
	// 時計回りで描画
	//context.beginPath();	// 重なって描画されるかどうか試す場合は、この行頭の//を削除してください。
	//context.fillStyle = "blue";	// 重なって描画されるかどうか試す場合は、この行頭の//を削除してください。
	context.arc(320,240,80, 0, Math.PI*2, false);
	context.fill();
}, true);
------------------------------------------------------------------------------------------------