API de Canvas

El elemento <canvas> define un área de mapa de bits en la página HTML.

El API de Canvas permite que JavaScript dibuje gráficos en el lienzo.

El API de Canvas puede dibujar formas, líneas, curvas, cuadrados, texto e imágenes, así como colores, rotación, transparencia y otras operaciones de píxeles.

Agregar Canvas a HTML

Puede agregar el elemento canvas en cualquier posición de la página HTML utilizando la etiqueta <canvas>:

Ejemplo

<canvas id="myCanvas" width="300" height="150"></canvas>

Prueba personal

Cómo acceder al elemento Canvas

Puede usar el método HTML DOM getElementById() para acceder al elemento <canvas>:

const myCanvas = document.getElementById("myCanvas");

Para dibujar en el lienzo, necesitas crear el objeto de contexto 2D:

const ctx = myCanvas.getContext("2d");

Notas

El elemento HTML <canvas> no tiene funciones de dibujo.

Debes usar JavaScript para dibujar cualquier gráfico.

El método getContext() devuelve un objeto con herramientas de dibujo (métodos).

Dibujar en el lienzo

Después de crear el objeto de contexto 2D, puedes dibujar en el lienzo.

El método fillRect() de abajo dibuja un rectángulo negro, cuyo ángulo superior izquierdo está ubicado en la posición 20,20. El rectángulo tiene un ancho de 150 píxeles y una altura de 100 píxeles:

Ejemplo

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Prueba personal

Usar color

La propiedad fillStyle establece el color de relleno del objeto de dibujo:

Ejemplo

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Prueba personal

También puedes usar el método document.createElement() para crear un nuevo elemento <canvas> y agregarlo a la página HTML existente:

Ejemplo

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Prueba personal

Trayectoria

Un método común para dibujar en el lienzo es:

1. Comenzar un camino - beginPath()
2. Moverse a un punto - moveTo()
3. Dibujar en el camino - lineTo()
4. Dibujar un camino - stroke()

Ejemplo

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Prueba personal