fig01El Canvas consiste en una región dibujable definida en el código HTML con atributos de altura y ancho.

Es un elemento de HTML 5 que permite dibujar gráficos, manipular imágenes y realizar animaciones en una página web de forma dinámica. Es decir, el gráfico se crea en el momento en que se carga la página. El gráfico se define mediante programación, usualmente Javascript. Una vez creado el gráfico se pueden programar acciones para que el usuario interactue con él, por ejemplo, haciendo clic para arrancar una animación o arrastrando un elemento del gráfico.

Aunque el elemento Canvas se crea con la etiqueta <canvas> </canvas> al hablar de Canvas en sentido amplio nos referimos a toda la API que incluye un conjunto de funciones para dibujar, líneas, rectángulos, círculos, etc. así como para rotar, escalar, transformar elementos gráficos, y otras funciones de variado uso.

El código JavaScript puede acceder a la zona a través de un conjunto completo de funciones similares a las de otras APIs comunes de dibujo 2D, permitiendo así que los gráficos sean generados dinámicamente. Algunos de los usos previstos incluyen construcción de gráficos, animaciones, juegos, y la composición de imágenes.


26. Dibujando con HTML5

En este vídeo comenzamos a ver la API canvas de HTML 5. Esta API nos permite dibujar gráficos y animarlos dentro de nuestra página web sin usar plugins de terceros. Es una de las grandes novedades que vienen nuevas con la especificación html5.

27. Degradados Lineales

Vemos en este vídeo como aplicar degradados lineales en el canvas. Utilizamos el método createLinearGradient.

28. Degradados Lineales y Radiales

En este vídeo modificamos un degradado lineal y vemos como crear un degradado radial o circular. Utilizamos el método createRadialGradient de la API canvas.

29. Trazados

Seguimos trabajando con la API Canvas viendo en esta ocasión cómo generar trazados. Procesamos trazados desde código JavaScript para llevarlos una vez creados al Canvas.

30. Trazados curvos 

En este vídeo vemos cómo crear trazados curvos dentro del Canvas. Utilizamos para ello los métodos arc(), quadraticCurveTo() y bezierCurveTo() de la API canvas.

31. Tipos de líneas

Vemos en este vídeo como cambiar el tipo de línea a la hora de dibujar trazados en el canvas. Utilizamos para ello una serie de propiedades que nos proporciona la API Canvas

32. Texto en Canvas

Seguimos trabajando con la API Canvas. Vemos cómo insertar texto y cómo modificar el mismo.

33. Transformaciones

Aplicamos transformaciones al contenido del Canvas con los métodos translate, rotate y scale.

34. Transformaciones II

Terminamos de ver los métodos de la API Canvas para realizar transformaciones en el Canvas. Vemos los métodos Transform, SetTransform, Save y Restore.

35. Superposiciones e imágenes

En este vídeo vemos cómo tratar la superposición de trazados en el Canvas. Para ello vemos los diferentes valores que puede tomar la propiedad globalCompositeOperation.

36. Imágenes como datos

En este vídeo vemos como manipular una imagen pixel a pixel desde JavaScript utilizando los métodos getImageData y putImageData de la API Canvas.

37. Animaciones en Canvas I

Comenzamos a ver en este vídeo cómo crear animaciones sencillas en el Canvas con HTML5. Utilizamos para ello los métodos clearRect, setInterval y clearInterval.

38. Animaciones en Canvas II

Comenzamos a ver en este vídeo cómo crear animaciones sencillas en el Canvas con HTML5. Utilizamos para ello los métodos clearRect, setInterval y clearInterval.