Canvas es uno de los componentes más novedosos de estándar HTML 5 que sirve para dibujar dinámicamente imágenes en una página web.

Un primer ejemplo de dibujo en un elemento canvas de HTML 5 con el API de canvas y Javascript.

Veremos cómo es el lienzo de un canvas, formado por un eje de coordenadas que podemos utilizar para posicionar todos los dibujos que queramos colocar en el canvas.

Cómo dibujar cuadrados y rectángulos en un elemento Canvas de HTML mediante la función fillRect() y strokeRect() de Javascript, válida en HTML 5.

Análisis de dos atributos esenciales para asignar color a los dibujos que se hacen en el elemento canvas. Atributos fillStyle para el color de relleno y strokeStyle para el color de trazado.

Veamos cómo realizar dibujos en un canvas con las funciones para caminos, que permiten la creación de estructuras más complejas.

Segundo ejemplo sobre los caminos en el elemento canvas, donde veremos las funciones closePath() y stroke().

Cómo dibujar un camino en canvas de HTML 5 con diversas variantes, cerrado y sin cerrar, y con o sin relleno de color.

En este artículo veremos otras pruebas de dibujo de caminos en los canvas.

Los caminos en los elementos canvas del HTML 5 pueden tener curvas, que conseguimos por medio de los arcos, las curvas cuadráticas y las curvas bezier.

Cómo dibujar arcos, para hacer curvas basadas en circunferencias o segmentos de ellas, en el lienzo de los elementos Canvas del HTML 5.

Las curvas cuadráticas son un tipo especial de curva que se define por tres puntos, dos para el inicio y fin de la curva y otro para su tendencia.

Las curvas Bezier son la manera más compleja de especificar dibujar caminos curvos en el elemento canvas del HTML 5.

Dibujar el contenido de imágenes en los elementos canvas del HTML 5, usando cualquier tipo de archivo gráfico permitido (gif, jpg, png) para incluir una imagen en el lienzo de un canvas.

Otro ejemplo de dibujo en con el API de canvas del HTML 5, en el que incluimos imágenes traídas por diferentes vías posibles con Javascript.

Escalado y recorte de imágenes en el elemento canvas. Como cambiar el tamaño y recortar las imágenes al dibujarlas en el lienzo de canvas del HTML 5.

Cómo realizar un patrón de repetición o mosaico de imágenes en el elemento Canvas del HTML5, lo que se conoce en inglés como Pattern.

Cómo alterar el grosor de la línea cuando dibujamos el contorno de un camino o un rectángulo en un elemento Canvas del HTML 5.

En las líneas que se dibujan en los elementos canvas del HTML 5 se pueden configurar distintos tipos de extremos, cuadrados, redondeados, etc.

Cuando una línea consta de varios segmentos, las junturas o uniones entre los distintos segmentos se pueden configurar de diferentes maneras con la propiedad lineJoin.

Cuando configuramos el valor miter para el parámetro lineJoin, podemos configurar un límite de tamaño para la punta que formará el ángulo de los segmentos de la línea con miterLimit.

Aplicación experimental del juego del ahorcado en Javascript, con jQuery y las librerías jQuery UI y uso del elemento Canvas del HTML 5.

FlashCanvas es una librería Javascript para conseguir que el elemento canvas del HTML 5 funcione en navegadores que no lo soportan, como Internet Explorer 6 al 8.

Experimentando con el desarrollo de juegos con HTML5: cómo crear animaciones en el Canvas con las librerías EaselJS.

Aquí voy a compartir con vosotros algunas reflexiones que os pueden ayudar a la hora de elegir entre Canvas y SVG, o una mezcla de ambos.

El elemento canvas de HTML5 es la funcionalidad más interesante que van a querer utilizar los desarrolladores para crear aplicaciones realmente avanzadas para la Web sin necesidad de instalar complementos en el navegador.

En este tutorial vamos a recorrer todos los pasos necesarios para crear una biblioteca de imágenes que podemos incluir en nuestro sitio web.

Cómo crear un blob a partir del contenido de un elemento canvas, con Javascript compatible con todos los navegadores.