¿Estado actual de las bibliotecas de lienzo de JavaScript? [cerrado]

He estado investigando sobre bibliotecas de lienzo HTML y me encontré con esta pregunta. ¿Cuál es el estado actual de las bibliotecas y marcos de JavaScript de lienzo HTML? que se preguntó en 2010. La respuesta principal fue Fabric.js. Después de investigar un poco más, encontré http://www.html5canvastutorials.com/ que presenta tutoriales sobre KineticJs, que se jacta de tener múltiples lienzos para la velocidad. Un poco más de investigación más tarde reveló que las bibliotecas Canvas parecen estar por todas partes cuando se trata de velocidad y características. ¿Cuál es el estado actual de las bibliotecas y marcos de JavaScript Canvas en la actualidad? ¿Ha salido uno en la cima?

EDITAR: Dado que las bibliotecas cambian constantemente y muchas personas han venido recientemente aquí para obtener noticias e información sobre nuevas bibliotecas, cambié la pregunta para que sea más atemporal.

Descargo de responsabilidad: soy el autor de Fabric.js .

Diría que Easel.js, Fabric.js y Paper.js se encuentran entre los más utilizados en este momento. A juzgar por la cantidad de observadores de Github para cada repositorio, el volumen de discusión en sus Grupos de Google y la frecuencia con la que escucho que se usan como bibliotecas de lienzo en Twitter.

Estos también son los que tienen documentación, ejemplos / demostraciones, grupos de discusión y pruebas unitarias más o menos decentes (el estado de las pruebas en la mayoría de las otras bibliotecas de lienzo es bastante triste).

También mantengo esta tabla de comparación de varias bibliotecas de lienzo , donde puede ver qué tan recientemente se actualizó la biblioteca, su tamaño, soporte para IE <9 o node.js, y más.

EDITAR: KineticJS ya no se mantiene activamente.

Descargo de responsabilidad: creé KineticJS

KineticJS está funcionando bastante bien. Puedes encontrar el código fuente en Github , donde actualmente está protagonizado por 2180 personas.

Puede manejar miles de formas concurrentes:

10,000 prueba de esfuerzo de arrastrar y soltar: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10,000 formas con información sobre herramientas: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Tiene muy buen soporte de eventos, incluidos los eventos móviles, y tiene un conjunto bastante sólido de cientos de pruebas unitarias, por lo que la base del código se siente bastante sólida.

kangax: PD ¡trabajo increíble con fabric.js! Aparte de KineticJS (por supuesto), mis otras dos bibliotecas favoritas son tela y papel.

Para los lectores recientes, a enero de 2013, evalué:

• Cinético
• Tela
• Papel
• Caballete

Con "evaluado", hice algo más que leer los documentos; Creé una aplicación prototipo.

Empecé con Fabric porque parecía tener la comunidad más grande y pensé que sería mi solución. Pero renuncié a Fabric por las siguientes razones:

• incoherencias de API extrañas e indocumentadas que consumieron gran parte de mi tiempo innecesariamente.
• soporte de evento de puntero inconsistente. Específicamente, Fabric no considera que un "Camino" sea un objeto de forma real que sea seleccionable y observable. Esto no satisfizo mis necesidades ya que las rutas interactivas son un requisito importante de mi aplicación.
• entre bastidores, adiciones de traducciones al lienzo para colocar objetos. Para mí, Fabric intenta ser demasiado inteligente en este sentido sin dejar claro al desarrollador lo que está haciendo.
• Opinión demasiado fuerte sobre cómo funciona la interactividad mover, redimensionar y rotar. En muchos sentidos, es genial tener esta funcionalidad integrada en el marco pero, en mi caso, no estaba de acuerdo con la forma en que se implementó, lo que significaba esencialmente tener que volver a implementarlo yo mismo de todos modos.
• documentación escasa - muchos de los casos en los que la documentación de un método tiene la forma: "setX (Y) - establece la X en Y" :-)

Eché un vistazo a Paper y no llegué demasiado lejos. Me pareció demasiado obtuso y también se encuentra entre demasiado taburetes en mi opinión: es una biblioteca de visualización demasiado grande para ser un modelo de objeto simple para Canvas, pero no es una biblioteca de visualización suficiente para competir con D3. Además, la documentación nuevamente no era particularmente accesible.

Creo que Easel probablemente tenga mucho sentido si tienes experiencia en Flash / ActionScript, pero yo no. Además, parecía demasiado centrado en el juego para mis requisitos. El clavo en el ataúd fue nuevamente documentación, no suficiente y presentada en un formato no estándar.

Entonces, terminé eligiendo Kinetic porque:

• tutoriales y ejemplos realmente ricos y claros
• Las funciones de API hacen lo que se les llama y se pueden adivinar en gran medida: productividad más rápida, curva de aprendizaje menos profunda
• tiene razonablemente claro lo que hace y lo que no; no es tan rico como algunos de los otros, pero eso es un beneficio; hace menos cosas pero las hace mejor
• Los caminos son Formas ciudadanas de primera clase, como cualquier otra Forma, lo cual era esencial para mis requisitos.

Kinetic no es perfecto de ninguna manera y ha habido algunas ocasiones en las que tuve que profundizar en el código fuente para averiguar qué está pasando realmente bajo las sábanas. Además, extraño el análisis y la salida de SVG de Fabric.

Recomiendo encarecidamente pixijs. Es una biblioteca de lienzos de alto rendimiento.

Pixi.js es un renderizador webGL 2D con un respaldo de lienzo sin interrupciones que le permite funcionar en todos los navegadores modernos, tanto de escritorio como móviles.

http://www.goodboydigital.com/pixi-js-is-out/