The simplest solution would be mathjax , which is a latex javascript renderer. And there are quite a few other similar rendering options.
Alternatively, you can also look at MathML , which is the w3c standard for writing mathematical equations. Unfortunately, there is support for it is entirely absent, as can be seen here , but in the long run it will be a great solution. In addition, the previously mentioned mathjax can be used as a MathML shim in browsers that do not yet support MathML.
The only problem with MathJax shim will be that when you make it interactive, it will interact differently with your code in browsers, what to do and not support MathML, but despite this, I personally advised MathML, except in those cases when you are already connected with LaTeX.
Based on your update, I'm not sure if this can be expressed in MathML or LaTeX, and I'm afraid that the only thing you could do is draw it on the canvas or set it up in SVG if you need interactivity later. But I can warn you that you already know that this will not be an easy task if you are not used to it.
To add interactivity to Mathjax:
- Use MathML for input
- Use HTML / CSS as output
- Disable the MathJax context menu by adding
showMathMenu:false to your MathJax configuration - Include an identifier in your MathML markup (e.g.
<mo id="someid"> ) - Use, for example, jQuery to bind to id after completing MathJax (ie
$("#someid").on("mousemove",function(){...}) )
A full working demo can be found here , move the equal sign to trigger a warning.