Etiqueta HTML <canvas>

❮ AnteriorReferencia deHTML completaSiguiente ❯

Ejemplo

Dibuje un cuadrado rojo sobre la marcha y muéstrelo dentro del elemento <canvas>:

<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 etiqueta <canvas> se utiliza para dibujar gráficos sobre la marcha, a través de secuencias de comandos (generalmente JavaScript).

La etiqueta <canvas> es solo un contenedor para gráficos, debe usar un script para dibujar los gráficos.

---

Soporte del navegador

Los números en la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

---

Diferencias entre HTML 4.01 y HTML5

La etiqueta <canvas> es nueva en HTML5.

---

Consejos y notas

Nota: cualquier texto dentro del elemento <canvas> se mostrará en los navegadores que no son compatibles con <canvas>.

Consejo: Obtenga más información sobre el elemento <canvas> en nuestro tutorial de lienzo HTML .

Consejo: Para obtener una referencia completa de todas las propiedades y métodos que se pueden usar con el objeto de lienzo, vaya a nuestraReferencia de lienzo HTML .

---

Atributos

Attribute	Value	Description
height	pixels	Specifies the height of the canvas
width	pixels	Specifies the width of the canvas

Atributos globales

La etiqueta <canvas> también admite los atributos globales en HTML .

---

Atributos del evento

La etiqueta <canvas> también admite los atributos de evento en HTML .

---

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán el elemento <canvas> con los siguientes valores predeterminados:

Ejemplo

canvas { 
    height: 150px;
    width: 300px;}

Inténtalo tú mismo "

❮ AnteriorReferencia deHTML completaSiguiente ❯