parzibyte/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Medio círculo con canvas</title>
</head>

<body>
	<h1>Medio círculo con canvas y JavaScript</h1>
	<a href="//parzibyte.me/blog">By Parzibyte</a>
	<br>
	<canvas id="canvas"></canvas>
	<script src="script.js"></script>
  </body>
</html>

## script.js
/**
 * Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
 *
 * https://parzibyte.me/blog
 */
const ALTURA_CANVAS = 200,
	ANCHURA_CANVAS = 400;

// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#FFCC80";
// Las variables indican el nombre de cada argumento para
// la función arc
let x = 100,
	y = 100,
	radio = 50,
	anguloInicio = Math.PI,
	anguloFin = Math.PI * 2;
contexto.arc(x, y, radio, anguloInicio, anguloFin);
// Una línea para la mitad del círculo, opcional
contexto.moveTo(x - radio - 2, y);
contexto.lineTo(x + radio + 2, y)
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Medio círculo con canvas</title>
	</head>

	<body>
	<h1>Medio círculo con canvas y JavaScript</h1>
	<a href="//parzibyte.me/blog">By Parzibyte</a>
	<br>
	<canvas id="canvas"></canvas>
	<script src="script.js"></script>
	</body>
	</html>
	/**
	* Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
	*
	* https://parzibyte.me/blog
	*/
	const ALTURA_CANVAS = 200,
	ANCHURA_CANVAS = 400;

	// Obtener el elemento del DOM
	const canvas = document.querySelector("#canvas");
	canvas.width = ANCHURA_CANVAS;
	canvas.height = ALTURA_CANVAS;
	// Del canvas, obtener el contexto para poder dibujar
	const contexto = canvas.getContext("2d");
	// Estilo de dibujo
	// Grosor de línea
	contexto.lineWidth = 5;
	// Color de línea
	contexto.strokeStyle = "#212121";
	// Color de relleno
	contexto.fillStyle = "#FFCC80";
	// Las variables indican el nombre de cada argumento para
	// la función arc
	let x = 100,
	y = 100,
	radio = 50,
	anguloInicio = Math.PI,
	anguloFin = Math.PI * 2;
	contexto.arc(x, y, radio, anguloInicio, anguloFin);
	// Una línea para la mitad del círculo, opcional
	contexto.moveTo(x - radio - 2, y);
	contexto.lineTo(x + radio + 2, y)
	// Hacemos que se dibuje
	contexto.stroke();
	// Lo rellenamos
	contexto.fill();