Dibujando círculos con HTML5
https://engineerdesistemas.blogspot.com/2016/12/dibujando-circulos-con-html5.html
Los dibujos en HTML5 pueden ir más allá de los trazados rectos, es posible también realizar dibujos circulares y todas sus variantes, evidentemente con el uso combinado de HTML5 y JavaScript.
Veamos un ejemplo de código para un círculo con un color de fondo además otros semicírculos circunscritos a él:
<!DOCTYPE html>
<html>
<head>
<title>Circulos con Canvas</title>
</head>
<body>
<canvas id="logotipo" width="120px" height="120px" style="border:1px solid blue;">
Este navegador no soporta Canvas
</canvas>
<script type="text/javascript">
var c=document.getElementById('logotipo');
var cxt=c.getContext('2d');
cxt.fillStyle="red"; //color del circulo
cxt.beginPath(); //comienza el recorrido
cxt.arc(60,60,50,0,Math.PI*2,true); // (coord x, coord y, radio en px, vuelta completa en rad, parte positiva)
cxt.closePath; // cierre de recorrido
cxt.fill(); // para el rellenado
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(60,60,30,0.75*Math.PI,Math.PI*2,true); // (coord x, coord y, radio en px, punto de inicio, punto final, parte positiva)
cxt.closePath;
cxt.fill();
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(70,40,10,Math.PI,Math.PI*2,false);
cxt.closePath;
cxt.fill();
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(40,50,10,1.8*Math.PI,0.8*Math.PI,true);
cxt.closePath;
cxt.fill();
</script>
</body>
</html>
Y el resultado en pantalla es:
