Índice

Etiqueta <canvas>

La etiqueta <canvas> incluye una zona que acogerá diseños y demás elementos gráficos.

Las dimensiones de esta zona están definidas por los atributos width y height, que fijan el ancho y la altura respectivamente.

<canvas width="200px" height="200px"></canvas>

Esta zona de dibujo es, por defecto, transparente. Una captura de pantalla no aportaría nada en este punto.

Para visualizar esta zona, incluida mediante la etiqueta <canvas>, agreguemos, mediante una propiedad de estilo, un simple borde de 1px.

Por otro lado, anticiparemos un identificador de tipo id para poder utilizar esta zona gráfica incluida con la etiqueta <canvas>.

El código queda así:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<canvas id="dibujo" width="200px" height="200px" style="border: 1px 
solid black"> 
</canvas> 
</body> 
</html>
images/CAP22IMG01.png

La etiqueta <canvas> solamente es compatible con las últimas versiones de los navegadores. Por tanto es prudente prever un contenido alternativo para aquellos navegadores más antiguos que no implementan esta funcionalidad:

<canvas id="dibujo" width="200px" height="200px" style="border: 
1px solid black"> 
Su navegador ...