Ejemplo
Dibujar un cuadrado rojo, sobre la marcha, y mostrarla en el interior del <canvas> elemento:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Inténtalo tú mismo " Definición y Uso
La <canvas> etiqueta se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript).
La <canvas> etiqueta es solamente un contenedor para los gráficos, se debe utilizar una secuencia de comandos para dibujar realmente los gráficos.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Diferencias entre HTML 4.01 y HTML5
La <canvas> etiqueta es nueva en HTML5.
Notas y sugerencias
Nota: Cualquier texto dentro de la <canvas> elemento se mostrará en los navegadores que no soportan <canvas> .
Consejo: Más información sobre el <canvas> elemento en nuestro Tutorial HTML lienzo .
Consejo: Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto de lona, vaya a nuestro HTML Canvas Referencia .
atributos
= Nuevo en HTML5.
| Atributo | Valor | Descripción |
|---|---|---|
| height | pixels | Especifica la altura del lienzo |
| width | pixels | Especifica el ancho de la tela |
Los atributos globales
La <canvas> etiqueta también es compatible con el de los atributos globales en HTML .
Atributos de eventos
La <canvas> etiqueta también es compatible con la atributos de eventos en HTML .
Ajustes por defecto CSS
Ninguna.