Las 8 mejores bibliotecas de dibujo gratuitas y de código abierto en JavaScript

Las imágenes y animaciones son atractivas, entretenidas y perfectas para transmitir información que sería difícil de procesar y comprender con tan solo palabras escritas. Esto aplica tanto para las fotografías que tomas con una cámara como para los dibujos que creas usando tu computadora. En esta publicación, te mostraré algunas de las mejores bibliotecas de dibujo gratuitas y de código abierto en JavaScript.

Existen muchas bibliotecas gratuitas que usan tecnologías como el elemento canvas de HTML5 y SVG para dibujar lo que desees en los navegadores. Puedes usar la API proporcionada por estas bibliotecas no solo para dibujar, sino también para animar lo que hayas creado.

Comencemos.

Two.js

Two.js es una biblioteca bastante popular y fácil de usar cuando se trata de dibujar formas 2D con JavaScript. Está muy bien documentada y tendrás que dedicar muy poco tiempo al aprendiza de los conceptos básicos.

Existen dos características que te gustarán de esta biblioteca. La primera es que es independiente del renderizador. Esto significa que puedes usar la misma API para dibujar tus gráficos en el elemento canvas, con SVG o con WebGL. Esta característica ha venido a mi rescate más de algunas veces cuando he usado la biblioteca. La segunda es que la biblioteca también viene con funcionalidad incorporada para animar cualquier cosa que dibujes en la pantalla.

También puedes actualizar el tamaño, la posición y el color de diferentes elementos que dibujes en la pantalla escuchando diferentes eventos del teclado y del ratón, lo que facilita la creación de juegos sencillos.

El ejemplo anterior de Jono Brandel usa Two.js para crear una carretera ondulada animada en canvas. Puedes encontrar muchos otros proyectos interesantes en el sitio web oficial.

Paper.js

La biblioteca Paper.js es otra solución gratuita y de código abierto para las personas que quieren dibujar usando JavaScript. La biblioteca usa canvas para trabajar con sus animaciones de dibujo. Sin embargo, su enfoque principal son los dibujos basados en vectores en lugar de las imágenes de trama.

Tienes dos opciones para crear gráficos usando la biblioteca. Puedes continuar usando JavaScript regular, o puedes considerar el uso de una versión modificada de JavaScript que la biblioteca llama PaperScript. El uso de PaperScript requerirá que dediques un poco más de tiempo a aprender a trabajar con él. Sin embargo viene con algunas ventajas, como cálculos más sencillos para los objetos Point y Size utilizados a través de la biblioteca.

Puedes hacer muchas cosas interesantes con la biblioteca, ya que tiene herramientas como capas anidadas, rutas simples y rutas compuestas. También puedes suavizar las curvas que dibujes con la biblioteca. Además, puedes usar modos de fusión para lograr que la superposición de diferentes elementos sea más atractiva visualmente.

El CodePen anterior de Alberto Jarez usa una serie de capas y herramientas de composición para crear efectos interesantes con círculos que cambian de forma al chocar entre sí.

P5.js

La biblioteca P5.js es una excelente opción para las personas que buscan una biblioteca que no tenga una curva de aprendizaje pronunciada, pero que pueda crear sistemas muy complicados si es necesario. La página de introducción a P5.js en el sitio web oficial tiene un ejemplo funcional que dibuja círculos dondequiera que muevas tu ratón en tan solo unas pocas líneas de código.

La biblioteca está inspirada en la popular plataforma Processing de Java, y tiene una comunidad activa de personas que te ayudarán cuando tengas dificultades. Hay muchos ejemplos disponibles que muestran lo que la biblioteca es capaz de hacer. Son de gran ayuda cuando estás buscando fuentes de inspiración. Puedes usarlas para aprender a simular física, crear sistemas de partículas y reaccionar a las diferentes entradas de los usuarios.

El ejemplo anterior de Johan Karlsson usa P5.js para crear algunos mosquitos que se mueven aleatoriamente en el lienzo. Al hacer clic en cualquier lugar dentro de la demostración, se creará una nueva población de mosquitos colocados al azar.

Konva

La biblioteca Konva es un poco diferente de las bibliotecas que hemos mencionado hasta ahora. Puedes usarla para dibujar formas básicas en el lienzo, pero es completamente posible hacer mucho más que eso. Puedes agregar animaciones y transiciones de alto rendimiento para agregar un atractivo visual a lo que dibujes en el lienzo.

Lo que hace que esta biblioteca sea especial es que te permite enlazar manejadores de eventos a cualquier cosa que dibujes en la pantalla. Puedes seleccionar y mover un objeto previamente dibujado en el lienzo. También es posible cambiar la escala y girar los objetos seleccionados sin afectar nada más de lo que hayas dibujado.

Estas funciones son perfectas para las personas que quieren una biblioteca que pueda ayudarles a crear aplicaciones de dibujo simples, así como juegos de arrastrar y soltar en el elemento canvas. Puedes usar grupos para mover y manipular varias formas juntas.

El sencillo juego de rompecabezas anterior fue creado por Jakub Beneš usando Konva. La idea básica es seleccionar el cuadro cuyo color sea ligeramente diferente al de los demás.

Fabric.js

La biblioteca Fabric.js se basa en la misma filosofía que Konva y tiene muchas de las mismas funciones. De hecho, Fabric.js parece ser más popular y activa que Konva.

La biblioteca proporciona un modelo de objeto interactivo construido sobre el elemento canvas. Básicamente, esto significa que puedes dibujar diferentes objetos, como figuras geométricas e imágenes en canvas para luego interactuar con ellos. La biblioteca ofrece a tus usuarios la opción de mover, cambiar la escala y girar cualquier cosa que dibujen en el lienzo, lo que te permite construir mockups sencillos de aplicaciones o generadores de memes, etcétera.

Intenta arrastrar el texto o añadir tus propias formas e imágenes al lienzo en el CodePen de Martin Florian mostrado arriba. La página de inicio de la biblioteca muestra aún más funciones, como el dibujo a mano alzada y el uso de patrones y degradados para rellenar formas.

Snap.svg

La biblioteca Snap.svg es una opción popular entre las personas que quieren crear gráficos vectoriales independientes de la resolución utilizando el poder de SVG y JavaScript. La biblioteca es de código abierto y de uso completamente gratuito.

Viene con una API limpia y poderosa para manipular y animar cualquier contenido SVG existente, así como generar contenido SVG dinámicamente. La biblioteca fue desarrollada teniendo en cuenta la compatibilidad con IE9 y versiones posteriores. Esto facilitó a los desarrolladores proporcionar funciones como el enmascaramiento, recorte y patrones, sin preocuparse por la compatibilidad con los navegadores antiguos.

Esta biblioteca fácil de usar viene con muchos métodos para crear formas básicas y aplicar propiedades como fill, stroke y strokeWidth usando pares clave-valor. También puedes agrupar elementos para realizar cambios a múltiples objetos a la vez. Es posible hacer referencia a diferentes objetos fácilmente, ya sea por sus nombres o por sus selectores CSS apropiados. Echa un vistazo al ejemplo a continuación, creado por Ronan Levesque.

SVG.js

Si quieres dibujar y animar SVG usando JavaScript, otra opción popular es el uso de la biblioteca SVG.js. El objetivo de los desarrolladores al crear esta biblioteca era hacerla tan pequeña y tan rápida como fuera posible y, al mismo tiempo, brindar una cobertura casi completa de las especificaciones de SVG. No hay dependencias y la biblioteca puede usarse de forma independiente.

Puedes ver cómo funciona con respecto a JS puro y Snap.svg en la página de inicio del sitio web. Es posible crear formas básicas y añadirlas al DOM usando funciones integradas. La biblioteca viene con todo tipo de funciones para manipular la apariencia de cualquier cosa que dibujes en la pantalla. También permite el uso de oyentes de eventos, para que puedas implementar la funcionalidad que cambia o anima cualquier elemento SVG en función de la interacción del usuario.

Prueba cambiando los valores de diferentes opciones en el CodePen de George Francis que se muestra arriba para generar patrones únicos usando SVG.js.

JS Sequence Diagrams

Es posible que la última biblioteca de nuestra lista no atraiga a las masas, pero tiene un propósito único que hace que valga la pena mencionarla. ¿Alguna vez has trabajado en un proyecto en el que hayas tenido que dibujar diagramas de secuencia UML? Si tu respuesta es afirmativa, entonces la biblioteca JS Sequence Diagrams probablemente sería perfecta para ti.

La biblioteca creará rápidamente un sencillo diagrama de secuencia basado en SVG usando JavaScript. Todo lo que tienes que hacer es proporcionarle una representación textual válida. Una cosa que quizá no te guste es que la biblioteca depende de una serie de bibliotecas para funcionar correctamente. Entre estas se encuentran Snap.svg, Web Font Loader, underscore.js y, opcionalmente, jQuery.

Sin embargo, la biblioteca sigue siendo una excelente opción para cualquier persona que quiera generar rápidamente ese tipo de diagramas sin preocuparse por escribir mucho código. También puedes aplicar tu propio estilo CSS para cambiar el color y el relleno de diferentes componentes. Echa un vistazo en la demostración de E T mostrada arriba, e intenta editar el código para ver de qué manera cambia el diagrama.

Pensamientos finales

Existen muchas bibliotecas gratuitas que puedes usar para dibujar objetos usando JavaScript. Nuestro objetivo con esta publicación fue destacar algunas bibliotecas populares con un decente conjunto de características que abordan problemas únicos. Con suerte, este artículo te ha ayudado a elegir una biblioteca que pueda dibujar y animar elementos en canvas así como con SVG.