Objeto Canvas de DOM HTML

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 lugar de la página HTML usando la etiqueta <canvas>：

Ejemplo

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

Pruebe usted mismo

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, debe crear el objeto de contexto 2D:

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

Notas

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

Debe 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, puede comenzar a dibujar en el lienzo.

El método fillRect() a continuación dibuja un rectángulo negro con la esquina superior izquierda 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);

Pruebe usted mismo

Usando 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);

Pruebe usted mismo

También puede 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);

Pruebe usted mismo

Trayectoria

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

1. Comenzar una trayectoria - beginPath()
2. Moverse a un punto - moveTo()
3. Dibujar en la trayectoria - lineTo()
4. Dibujar una trayectoria - 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();

Pruebe usted mismo