> Manuales > Manual de Canvas del HTML 5

Si alguna vez has querido hacer cualquier tipo de dibujo en una página web, 2D o 3D, con capacidad de aplicar interacción con el usuario, tu mejor aliado será el elemento Canvas.

Canvas literalmente un lienzo donde puedes realizar el dibujo de cualquier tipo de figura o forma, ayudado de programación mediante el lenguaje Javascript. Puedes usarlo para asuntos sencillos pero también para desarrollar animaciones complejas, gráficas interactivas y hasta juegos dentro del navegador.

En este Manual del elemento Canvas del HTML 5 te vamos a enseñar a dibujar sobre los lienzos, utilizando Javascript y el API de Canvas. Comenzaremos con ejemplos sencillos para que puedas entender el API Javascript para dibujo en un canvas, pero luego haremos ejemplos más complejos para conseguir animaciones e interacción con el usuario con librerías.

Manual de Canvas del HTML 5
Artículos
  • Artículos del manual

  • 1 Introducción a Canvas del HTML 5

    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.

  • Primeros pasos con el elemento Canvas

    Introducción al elemento Canvas y primeros ejemplos de dibujo. Aprendemos a crear rectángulos y a configurar los colores que se utilizan en el dibujo.

  • 2 Ejemplo de dibujo con el API de canvas

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

  • 3 Entender el lienzo de canvas

    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.

  • 4 Dibujar rectángulos en un 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.

  • 5 Trabajando con color de relleno y de trazado en canvas

    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.

  • Dibujar caminos en Canvas

    A través de los caminos se pueden dibujar todo tipo de figuras en el lienzo de Canvas. Vemos todos los tipos de caminos que existen y diferentes ejemplos prácticos.

  • 6 Caminos en Canvas del HTML 5

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

  • 7 Ejemplo 2 de dibujo de caminos en canvas

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

  • 8 Caminos en canvas: ejemplo 3

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

  • 9 Otros ejemplos de dibujo de caminos en elementos Canvas

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

  • 10 Curvas en caminos de Canvas del HTML 5

    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.

  • 11 Dibujo de curvas con arcos en canvas

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

  • 12 Curvas cuadráticas en el canvas

    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.

  • 13 Curvas Bezier en Canvas

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

  • Trabajo con imágenes en Canvas

    A través de la utilización de imágenes se pueden mejorar mucho los diseños que se realizan en los canvas. Además mostramos distintas maneras de modificar dinámicamente por medio de scripts el aspecto de las imágenes.

  • 14 Usar imágenes en el Canvas

    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.

  • 15 Maneras de acceder a objetos Image para mostrar en el 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.

  • 16 Escalado y recorte en imágenes en canvas

    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.

  • 17 Mosaico de imágenes en Canvas

    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.

  • Configuraciones de dibujo de líneas

    Las líneas que dibujamos en el recorrido de los caminos en un canvas se pueden configurar con diferentes parámetros, como el grosor, la forma de sus extremos, el redondeo de las esquinas, etc.

  • 18 Grosor de la línea en Canvas

    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.

  • 19 Extremos de las líneas en canvas

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

  • 20 Uniones entre segmentos de líneas en canvas con lineJoin

    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.

  • 21 Límite de la punta del ángulo con miterLimit en canvas

    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.

  • Prácticas y librerías para trabajo con Canvas

    Diversos artículos sueltos que te ofrecerán guías para saber por dónde continuar aprendiendo sobre el elemento Canvas. Se trata de ejemplos prácticos para afianzar tus conocimientos y presentaciones de librerías Javascript para el trabajo con Canvas que permiten realizar animaciones y juegos basados en HTML5 de una manera más sencilla.

  • 22 Juego del ahorcado Javascript con jQuery UI y Canvas del HTML 5

    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.

  • 23 FlashCanvas: elemento canvas compatible con todos los navegadores

    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.

  • 24 Animaciones en el Canvas con EaselJS

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

  • 25 Cómo elegir Canvas o SVG para tus sitios Web

    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.

  • 26 Guía del Canvas HTML5 para desarrolladores

    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.

  • 27 Cómo crear una galería de imágenes con el Canvas de HTML5

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

  • 28 Crear un blob a partir de un canvas

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