parzibyte/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Trapecio con canvas</title>
  </head>
  <body>
		<h1>Trapecio 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 = "#1565C0";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Mover a la esquina superior izquierda
contexto.moveTo(25, 5);
// Dibujar la línea hacia la derecha
contexto.lineTo(125, 5);
// Ahora la que va hacia abajo
contexto.lineTo(125, 80); // A 80 porque esa es la altura
// La que va hacia la izquierda
contexto.lineTo(5, 80);
// 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>Trapecio con canvas</title>
	</head>
	<body>
	<h1>Trapecio 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 = "#1565C0";
	// Comenzamos la ruta de dibujo, o path
	contexto.beginPath();
	// Mover a la esquina superior izquierda
	contexto.moveTo(25, 5);
	// Dibujar la línea hacia la derecha
	contexto.lineTo(125, 5);
	// Ahora la que va hacia abajo
	contexto.lineTo(125, 80); // A 80 porque esa es la altura
	// La que va hacia la izquierda
	contexto.lineTo(5, 80);
	// Y dejamos que la última línea la dibuje JS
	contexto.closePath();
	// Hacemos que se dibuje
	contexto.stroke();
	// Lo rellenamos
	contexto.fill();