Canvas para dibujar en HTML

Es un elemento introducido en el estandard HTML 5 para realizar dibujos y animaciones en las páginas web de manera más sencilla. Con esto se relega el uso de Flash y se termina de extinguir el uso de applets Java

¿Qué es el canvas? pues es como un lienzo donde se puede dibujar o bien situar imágenes predefinidas. Por dibujar se entiende: trazar lineas, figuras geométricas, texto, etc.

Se usa habitualmente con Javascript y facillita enormemente el diseño de animaciones. De hecho unido a Javascipt y CSS3 sustituye perfectamente a las aplicaciones Flash y applets Java.

Se incopora a la página web de la misma forma que un div, solo que tiene un tamaño por defecto de 150 px de alto por 300px de ancho, obviamente se le puede dar cualquier otra dimensión usando los atributos width and height, o mejor aún usando las definiciones adecuadas de estilo CSS.

Sus argumentos específicos son width para especificar el ancho, height para el alto. Para que los scripts puedan manejar un elemento canvas debe identficarse mediante un atributo id. Y se le puede asignar una clase (class) o definición de estilo CSS (style). Si contiene texto este será mostrado por los navegadores que no soporten este elemento de HTML 5.

Es un simple contenedor, pero posee métodos y propiedades que se utilizan mediante un lenguaje de script (lo habitual es Javascript) para realizar los dibujos. Estos pueden ser en 2D y en 3D, a través del API WEbGL

En este ejemplo que os pongo a continuación se ven algunas formas básicas y un texto para que te hagas una idea del uso básico del elemento canvas