Estoy tomando una tarea para volver a escribir la siguiente aplicación flash en HTML5:

http://www.docircuits.com/circuit-editor

Dada la complejidad de la aplicación y mi I + D hasta ahora, he identificado a AngularJS como el marco MVC preferido para la implementación. La aplicación tiene varias partes, como paneles, menús, propiedades, gráficos, etc., que creo que se pueden implementar fácilmente en AngularJS.

Sin embargo, el problema clave es que el diseño y la interacción de los componentes (como arrastrar y soltar, mover, manejar cables, etc.) deben estar basados ​​en Canvas, ya que he podido exportar todos los gráficos vectoriales desde Flash usando el kit de herramientas CreateJS (http://www.adobe.com/in/products/flash/flash-to-html5.html) en una biblioteca de lienzo y no a un SVG.

El problema es que no hay una forma clara de comunicarse entre los "objetos individuales dentro de un lienzo" y AngularJS. He visto los siguientes ejemplos, pero casi todos funcionan en el objeto de lienzo, y no se trata de manejar componentes individuales dentro de Canvas:

Enlace AngularJS a WebGL / Canvas

¿Ya existe una directiva de dibujo de lienzo para AngularJS?

Estoy un poco atrapado aquí, y no estoy seguro de qué hacer. Realmente agradecería algunos comentarios sobre:

Si AngularJS es la elección correcta?

¿Debo intentar implementar la parte de Canvas en otra biblioteca (como Fabric.js, kinect.js, Easel.js) e integrarla con Angular (que de nuevo parece una tarea demasiado grande por ahora)?

Si no es así, ¿a qué otro marco debería cambiar que pueda manejar fácilmente el lienzo y otras funciones como paneles, menús, gráficos, etc. con facilidad?