Sinceramente ho modificato leggermente il tuo codice per renderlo più leggibile, ma devo dire che ci eri molto vicino! La prima cosa che ho dovuto veramente modificare è stato il raggio del tuo arco, troppo grande.

codice:
<html> 
	<head> 
		<title>Smile></title>
 		<script>
			window.onload = function(){
			    var canvas = document.getElementById("canvas");
			    var context = canvas.getContext("2d");

			    var centerX = 200;
			    var centerY = 160;
			    var radius = 50;
			    var startingAngle = 0;
			    var endingAngle = Math.PI;
			    var counterclockwise = false;
			    context.arc(centerX, centerY, radius, startingAngle, 
			        endingAngle, counterclockwise);

			    context.lineWidth = 15;
			    context.strokeStyle = "rgb(200, 0, 0)"; // line color
			    context.stroke();
			};
		</script> 
	</head> 
	<body> 
		<canvas id="canvas" width="400" height="300"> 
			Your browser doesn't support the HTML5 element canvas. 
		</canvas> 
	</body> 
</html>
Come puoi vedere ho anche tolto la funzione .beginPath(); che risulta essere del tutto opzionale, quindi se vuoi puoi anche lasciarlo, ma non cambierà assolutamente niente...