État actuel des bibliothèques de canevas Javascript? [fermé]

J'ai fait des recherches sur les bibliothèques de canevas HTML et je suis tombé sur cette question. Quel est l'état actuel de l'art dans les bibliothèques et frameworks JavaScript de canevas HTML? cela a été demandé en 2010. La principale réponse était Fabric.js. Après avoir fait un peu plus de recherche, je suis tombé sur http://www.html5canvastutorials.com/ qui propose des tutoriels sur KineticJs, qui se vante d'avoir plusieurs toiles pour la vitesse. Un peu plus de recherche a révélé plus tard que les bibliothèques Canvas semblent être partout en matière de vitesse et de fonctionnalités. Quel est l'état actuel des bibliothèques et des frameworks JavaScript Canvas aujourd'hui? Est-ce que l'un est arrivé en tête?

EDIT: Étant donné que les bibliothèques changent constamment et que beaucoup de gens sont récemment venus ici pour des nouvelles et des informations sur les nouvelles bibliothèques, j'ai changé la question pour qu'elle soit plus intemporelle.

Avertissement: je suis l'auteur de Fabric.js .

Je dirais que Easel.js, Fabric.js et Paper.js sont parmi les plus utilisés actuellement. Je juge par le nombre d'observateurs Github pour chaque référentiel, le volume de discussion dans leurs groupes Google et la fréquence à laquelle j'entends parler d'eux comme bibliothèques de canevas sur Twitter.

Ce sont aussi ceux avec une documentation, des exemples / démos, des groupes de discussion et des tests unitaires plus ou moins décents (l'état des tests dans la plupart des autres bibliothèques de canevas est assez triste).

Je maintiens également ce tableau de comparaison de diverses bibliothèques de canevas , où vous pouvez voir à quelle date la bibliothèque a été mise à jour, sa taille, la prise en charge d'IE <9 ou node.js, etc.

EDIT: KineticJS n'est plus activement maintenu.

Clause de non-responsabilité: j'ai créé KineticJS

KineticJS se porte plutôt bien. Vous pouvez trouver le code source sur Github , où il est actuellement joué par 2180 personnes.

Il peut gérer des milliers de formes simultanées:

10 000 tests de résistance par glisser-déposer: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10000 formes avec info-bulles: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Il a une très bonne prise en charge des événements, y compris les événements mobiles, et il dispose d'une suite assez solide de 100 tests unitaires, de sorte que la base de code semble assez solide.

kangax: PS super travail avec fabric.js! Outre KineticJS (bien sûr), mes deux autres bibliothèques préférées sont le tissu et le papier.

Pour les lecteurs récents, en janvier 2013, j'ai évalué:

• Cinétique
• en tissu
• Papier
• Chevalet

Par «évalué», j'ai fait plus que simplement lire la documentation; J'ai créé une application prototype.

J'ai commencé avec Fabric car il semblait avoir la plus grande communauté et je pensais que ce serait ma solution. Mais j'ai abandonné Fabric pour les raisons suivantes:

• incohérences d'API étranges et non documentées qui ont brûlé beaucoup de temps inutilement.
• prise en charge des événements de pointeur incohérente. Plus précisément, Fabric ne considère pas un "Chemin" comme un véritable objet de forme sélectionnable et observable. Cela ne répondait pas à mes besoins car les chemins interactifs sont une exigence majeure de mon application.
• dans les coulisses des ajouts de traductions au canevas pour positionner les objets. Pour moi, Fabric essaie d'être trop intelligent à cet égard sans être clair pour le développeur ce qu'il fait.
• opinion trop forte sur le fonctionnement de l'interactivité de déplacement, de redimensionnement et de rotation. À bien des égards, c'est formidable d'avoir cette fonctionnalité intégrée dans le cadre mais, dans mon cas, je n'étais pas d'accord avec la façon dont elle a été mise en œuvre, ce qui impliquait essentiellement de devoir la réimplémenter moi-même de toute façon.
• documentation clairsemée - beaucoup de cas où la documentation d'une méthode est de la forme: "setX (Y) - met le X à Y" :-)

J'ai jeté un coup d'œil à Paper et je ne suis pas allé trop loin. Cela m'a semblé trop obtus et se situe également entre trop tabourets IMO - c'est trop une bibliothèque de visualisation pour être un simple modèle d'objet pour Canvas mais ce n'est pas assez une bibliothèque de visualisation pour rivaliser avec D3. De plus, la documentation n'était pas particulièrement accessible.

Je pense que Easel a probablement beaucoup de sens si vous avez un arrière-plan Flash / ActionScript, mais pas moi. De plus, cela semblait trop axé sur le jeu pour mes besoins. Le clou dans le cercueil était à nouveau de la documentation - pas assez et présenté dans un format non standard.

Donc, j'ai fini par choisir Kinetic parce que:

• tutoriels et exemples vraiment riches et clairs
• Les fonctions de l'API font ce qu'elles appellent et sont largement devinables - productivité plus rapide, courbe d'apprentissage moins profonde
• est raisonnablement clair sur ce qu'il fait et ce qu'il ne fait pas - ce n'est pas aussi riche que certains des autres, mais c'est un avantage; il fait moins de choses mais les fait mieux
• Les chemins sont des formes citoyennes de premier ordre, comme toute autre forme, ce qui était essentiel pour mes besoins.

Kinetic n'est en aucun cas parfait et il y a eu quelques fois où j'ai dû plonger profondément dans le code source pour comprendre ce qui se passait réellement sous les couvertures. De plus, l'analyse et la sortie SVG de Fabric me manquent.

Je recommande vivement pixijs. C'est une bibliothèque de canevas haute performance.

Pixi.js est un moteur de rendu webGL 2D avec une toile de secours transparente qui lui permet de fonctionner sur tous les navigateurs modernes à la fois de bureau et mobiles.

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