円の描画[解説]
四角形ならrect()関数を使いますが、円・円弧の表示にはarcを使います。これがちょっと曲者?

arc( 中心X , 中心Y , 半径 , 開始角度 , 終端角度 , anticlockwise )
を使います。
開始角度と終端角度は3時のところを0度として時計回りにラジアンで定義します。
anticlockwise をTrueにすれば、反時計回りになります。
サンプル画面です。


			x = 200;
			y = 50;
			r = 50;
			context.moveTo(x + r, y)
			context.arc(x, y, r, Math.PI / 2, Math.PI / 2 * 3);
中央上部が円弧になっていません。
開始位置を3時にしたので、3時の位置から90度の位置に直線が引かれています。 対応するには開始位置を円周上に設定します。修正したのがこれ。

			x = 300;
			y = 150;
			r = 50;
			//円周上の描画開始座標を計算
			var startAngle = Math.PI / 6;
			var dx = r * Math.cos(startAngle);
			var dy = r * Math.sin(startAngle);
			context.moveTo(x + dx, y + dy);
			context.arc(x, y, r, startAngle, Math.PI / 2 * 3);
久々の三角関数でした。もう公式を忘れていました。四角形と同様にfillとstrokeが有効です。
全ソースです。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8" />
	<title>>円の描画</title>
	<style>
	#canvas{
		background-color: aquamarine;
	}	
	</style>

	<script type="text/javascript">
		var context = null;
		var colorVal = 0;//明るさの調整

		function timerTask() {
			var col = 0xff0000 + 0x000100 * colorVal + 0x000001 * colorVal;
			var strCol = "#" + col.toString(16);
			// 線の塗りを設定する
			context.strokeStyle = strCol;
			// 線の太さを設定する
			context.lineWidth = 1.0;
			// 面の塗りを設定する(単一色)
			col = 0x010000 * colorVal + 0x00ff00 + 0x000001 * colorVal;
			strCol = "#" + col.toString(16);
			context.fillStyle = strCol;
			// 描画パスを開始
			context.beginPath();
			// 円を描画パスに追加
			var x = 100;
			var y = 200;
			var r = 100;
			context.moveTo(x + r, y)
			context.arc(x, y, r, 0, Math.PI * 2);
			x = 200;
			y = 50;
			r = 50;
			context.moveTo(x + r, y)
			context.arc(x, y, r, Math.PI / 2, Math.PI / 2 * 3);
			x = 300;
			y = 150;
			r = 50;
			//円周上の描画開始座標を計算
			var startAngle = Math.PI / 6;
			var dx = r * Math.cos(startAngle);
			var dy = r * Math.sin(startAngle);
			context.moveTo(x + dx, y + dy);
			context.arc(x, y, r, startAngle, Math.PI / 2 * 3);


			// fill描画
			context.fill();
			// stroke描画
			context.stroke()

			colorVal += 5;
			if (colorVal >= 200) {
				colorVal = 0;
			}
		}

		function init() {
			//描画コンテキストの取得
			var canvas = document.getElementById('canvas');
			context = canvas.getContext('2d');
			window.setInterval(timerTask, 100);
		}
	</script>

</head>

<body onLoad="init()">
	<canvas width="400" height="300" id="canvas"></canvas><br>
	解説は<a href="arc_.html">こちら</a>。
</body>

</html>