parzibyte/index.html

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

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Triángulo con canvas</title>
</head>

<body>
	<h1>Triángulo 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 = "#AB47BC";
// Nos movemos a la esquina superior izquierda
contexto.moveTo(5, 5);
// Dibujamos una línea hacia abajo
contexto.lineTo(5, 100);
// Desde el fin de esa línea,
// dibujamos una hacia la derecha
contexto.lineTo(150, 100);
// Y dejamos que JS cierre nuestro dibujo
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>Triángulo con canvas</title>
	</head>

	<body>
	<h1>Triángulo 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 = "#AB47BC";
	// Nos movemos a la esquina superior izquierda
	contexto.moveTo(5, 5);
	// Dibujamos una línea hacia abajo
	contexto.lineTo(5, 100);
	// Desde el fin de esa línea,
	// dibujamos una hacia la derecha
	contexto.lineTo(150, 100);
	// Y dejamos que JS cierre nuestro dibujo
	contexto.closePath();
	// Hacemos que se dibuje
	contexto.stroke();
	// Lo rellenamos
	contexto.fill();