parzibyte/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Curvas de Bézier en Canvas</title>
  </head>
  <body>
		<h1>Curvas de Bézier en Canvas usando 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: curvas de Bézier
 *
 * 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");

// Mover a donde comienza la curva
let inicioX = 50, inicioY = 50;
contexto.moveTo(inicioX, inicioY);
// Coordenadas del primer punto
let puntoX1 = 0,
	puntoY1 = 100;
// Coordenadas del segundo punto
let puntoX2 = 120,
	puntoY2 = 15;
// Coordenadas en donde termina la curva
let x = 100, y = 100;
contexto.bezierCurveTo(puntoX1, puntoY1, puntoX2, puntoY2, x, y);
contexto.stroke();


// Lo siguiente es un rectángulo para
// indicar en dónde están los puntos
contexto.fillStyle = "red";
contexto.fillRect(puntoX1, puntoY1, 5, 5);
contexto.fillRect(puntoX2, puntoY2, 5, 5);
contexto.fillRect(inicioX, inicioY, 5, 5);
contexto.fillRect(x, y, 5, 5);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Curvas de Bézier en Canvas</title>
	</head>
	<body>
	<h1>Curvas de Bézier en Canvas usando 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: curvas de Bézier
	*
	* 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");

	// Mover a donde comienza la curva
	let inicioX = 50, inicioY = 50;
	contexto.moveTo(inicioX, inicioY);
	// Coordenadas del primer punto
	let puntoX1 = 0,
	puntoY1 = 100;
	// Coordenadas del segundo punto
	let puntoX2 = 120,
	puntoY2 = 15;
	// Coordenadas en donde termina la curva
	let x = 100, y = 100;
	contexto.bezierCurveTo(puntoX1, puntoY1, puntoX2, puntoY2, x, y);
	contexto.stroke();


	// Lo siguiente es un rectángulo para
	// indicar en dónde están los puntos
	contexto.fillStyle = "red";
	contexto.fillRect(puntoX1, puntoY1, 5, 5);
	contexto.fillRect(puntoX2, puntoY2, 5, 5);
	contexto.fillRect(inicioX, inicioY, 5, 5);
	contexto.fillRect(x, y, 5, 5);