parzibyte/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Pentágono con canvas</title>
  </head>
  <body>
		<h1>Pentágono 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 = "#9CCC65";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// La esquina de arriba ( o como se llame, soy programador, no matemático)
contexto.moveTo(100, 5);
// Dibujar hacia la derecha y arriba o centro
contexto.lineTo(145, 38);
// Ahora hacia la derecha y abajo
contexto.lineTo(130, 80);
// Ahora hacia la izquierda y abajo
contexto.lineTo(70, 80);
// Izquierda arriba
contexto.lineTo(55, 38);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// 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>Pentágono con canvas</title>
	</head>
	<body>
	<h1>Pentágono 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 = "#9CCC65";
	// Comenzamos la ruta de dibujo, o path
	contexto.beginPath();
	// La esquina de arriba ( o como se llame, soy programador, no matemático)
	contexto.moveTo(100, 5);
	// Dibujar hacia la derecha y arriba o centro
	contexto.lineTo(145, 38);
	// Ahora hacia la derecha y abajo
	contexto.lineTo(130, 80);
	// Ahora hacia la izquierda y abajo
	contexto.lineTo(70, 80);
	// Izquierda arriba
	contexto.lineTo(55, 38);
	// Y dejamos que la última línea la dibuje JS
	contexto.closePath();
	// Hacemos que se dibuje
	contexto.stroke();
	// Lo rellenamos
	contexto.fill();