Elemento canvas

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento canvas crea un área rectangular donde los autores pueden representar gráficos y animaciones programáticamente y en tiempo real. Este es un recurso valuable al diseñar sitios ricos en animación e interactividad, o cuando se desarrollan aplicaciones dentro del documento o videojuegos.

Desde el punto de vista de un autor de contenido, el elemento canvas define solo un área rectangular. Sus beneficios se vuelven tangibles al ser usado junto a lenguajes de programación del lado cliente como Javascript.

Se alienta a los autores a proveer alternativas de respaldo al contenido mostrado con el elemento canvas. Estas alternativas deberían ubicarse dentro de las etiquetas del elemento, permitiendo a los navegadores ocultarlas cuando el soporte para canvas esté presente.

Ejemplos

El siguiente ejemplo muestra a un elemento canvas ejecutando una animación que es llevada a cabo por una función escrita en Javascript. Como el ancho y la altura de este elemento no puede ser un valor relativo (como un porcentaje), esta función establecerá además, programáticamente, el ancho del elemento de modo que tome todo el espacio disponible en su padre.

<canvas id="canvas-1" height="100"></canvas>

Ahora un elemento canvas será configurado para proveer interactividad, al permitir al usuario dibujar líneas con el puntero del mouse. Puedes probar esta pizarra de dibujo moviendo el mouse sobre la superfice mientras presionas el botón izquierdo. Si presionas el botón derecho sobre el elemento, el tablero será limpiado.

<canvas id="canvas-2" height="200"></canvas>

Atributos

Atributos específicos

width

El número de píxeles a ser usados como ancho del rectángulo que define este elemento. Cuando este atributo no se especifica, el área del elemento toma un ancho de 300 píxeles.

Ejemplo

<canvas width="500"></canvas>

height

El número de píxeles a ser usados como altura del rectángulo que define este elemento. Cuando este atributo no se especifica, el área del elemento toma una altura de 150 píxeles.

Ejemplo

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

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.