Como dibujar cicunferencias

Realmente canvas tiene dos métodos para dibujar arcos. el que se muestra aquí se usa a partir de: el centro del arco, el radio y los ángulos de inicio y de final. Si este ángulo va de 0 a 360º tenemos una circunferencia. El ángulo se dbe expresar en radianes (uf!!! matméticas). Es fácil una circunferencia entera tiene 2*pi (el famoso 3.1416) radianes. O sea 360 grados son 2pi radianes y 180 son pi radianes y 90º son pi/2 radianes. El 0 corresponde a la horizontal y va aumentando en el sentido horario. O sea, 0º son las 3 del reloj, 0.5 Pi son las 6, Pi son las 9, 1.5*Pi son las 12 y 2·Pi vuelve las 3.

La otra forma de dibujar arcos la tienes en el apartado dedicado a las curvas Bézier. Lo explico a allí por su parecido con este método de dibujo de curvas.

Vamos a dibujar una circunferencia y esta vez vamos a usar una linea gruesa.

<canvas width="600" height="300" id="mipanel"></canvas>
<script> 
	var miLienzo = document.getElementById("mipanel");
	var lapiz = miLienzo.getContext("2d");
	lapiz.beginPath();	  
	lapiz.arc(300,150,80, 0, 2*Math.PI);
	lapiz.lineWidth = 5;
	lapiz.stroke();
</script> 
Prueba este código

Ahora vamos a dibujar un arco de 180º. Fíjate el ángulo de inicio y el final .

<canvas width="600" height="300" id="mipanel"></canvas>
<script> 
	var miLienzo = document.getElementById("mipanel");
	var lapiz = miLienzo.getContext("2d");
	lapiz.beginPath();	  
	lapiz.arc(300,150,80, 0.5*Math.PI, 1.5*Math.PI)
	lapiz.stroke();
</script>  
Prueba este código
Como ves en primero creamos la linea y luego se dibuja con el método stroke().

Circulo relleno uniforme

Como recordarás del cole la circunferencia es una linea y el círculo es lo que hay dentro de la circunferencia. O sea un ciruclo es como una circunferencia rellena (que no me lea ningún matemático o le sangrarán los ojos). A difrencia de los rectángulos no existe una forma directa de dibujar un círculo: se crea la circunferencia, luego se rellena y finalmente se ibuja dibuja

<canvas width="600" height="300" id="mipanel"></canvas>
<script> 
		var miLienzo = document.getElementById("mipanel");
		var lapiz = miLienzo.getContext("2d");
		lapiz.beginPath();	  
		lapiz.arc(300,150,80, 0, 2*Math.PI);
		lapiz.fill();
		lapiz.stroke();
</script> 
Prueba este código