canvas-circulos-arcos.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
<canvas id='logotipo' width='120' height='120' style='border:1px solid black' >
	
tu navegador no soporta canvas
</canvas>


<script type='text/javascript'>
	
var c=document.getElementById('logotipo');
var cxt =c.getContext("2d");


cxt.fillStyle="blue";
cxt.beginPath(); // empezamos un recorrido sin parametros

cxt.arc(60,60,50,0,Math.PI*2,true);  // expresado en radianes 50 hasta pix2
cxt.closePath;
cxt.fill(); // para rellenarlo



cxt.fillStyle="white";
cxt.beginPath(); // empezamos un recorrido sin parametros
cxt.arc(60,60,30,0.75*Math.PI,Math.PI*2,true);
    //   x  y rad  de  hasta pi*2

cxt.closePath;
cxt.fill();


cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(70,40,10,Math.PI,Math.PI*2,false);  // false parte de arriba o parte de abajo en true
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>