AsciiMath to SVG to Canvas

[ransome...@gmail.com]

Hi all,

First, let me say that MathJax is a godsend.  I am writing a Math game for a client and one of the games needs to display complex equations.  Figuring out the commands to parse and draw them is way outside of their budget, so kudos to the MathJax team for making it a possibility :)

I'm having a bit of trouble, I need to take an equation that is provided by a statemachine (built further up the pipeline) and draw it to canvas (it's an HTML5, canvas based game).  The Python script that builds the state machine outputs something similar to (the same as?) AsciiMath, so I figure if MathJax can input AsciiMath and output to SVG, I can use another library to convert SVG to Canvas and close the whole thing up.

Problem is, I'm not quite understanding the MathJax system.

Some stripped down code is here: http://www.clumsyfingers.net/scratch/mathjax.html

From the docs and information on these forums that setup should be able to take the x + 1 = 2 equation I gave it, convert it to SVG and output it into the div with id=math.  It looks like it's doing something, but it throws a parsing error, so I think I have my asciiMath setup wrong.

I'm sure I'm glossing over something, this sort of thing seems to work in the dynamic html examples but I can't find any example that shows AsciiMath -> SVG directly.  Any help would be appreciated.

Thanks,

Ransome

[Davide P. Cervone]

The problem is in the routine

      (function () {
        var QUEUE = MathJax.Hub.queue;
        var math = null;

        QUEUE.Push(function () {
          math = MathJax.Hub.getAllJax("math")[0];
        });
        QUEUE.Push(["Text",math,"1+x=2"]);
      })();

Note that the two QUEUE.Push commands are performed at the time this function runs (right after MathJax is loaded and before the page body is even created).  That means MathJax hasn't run yet, and the function from the first QUEUE.Push has not been performed when the second QUEUE.Push is done.  At that point, the math variable is null, and so when QUEUE.Push tries to turn ["Text",math,"1+x=2"] into a callback, it can't because math isn't an object that has a Text method (math is null).  That is, you are trying to use math before it has its value.

What you should do is get math and set its text in the same function pushed onto the queue.  In fact, you don't need the outer closure at all.  Simply do

MathJax.Hub.Queue(function () {

  var math = MathJax.Hub.getAllJax("math")[0];

  return math.Text("1+x=2");

});

Also, note that ${}$ in TeX is an empty expression, but for AsciiMath, it is actually an open and close brace.  Perhaps you want to use $ $ instead.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[ransome...@gmail.com]

Billiant, thank you for taking a look Davide and for the quick response!  I understand a bit better now.  For some reason I thought the queue was because MathJax needed to perform the gathering operation and have it complete before moving on to the processing.  Thinking back that is silly since, while javascript can be asynchronous in the way the internet is asynchronous, its normal script following is single threaded.   I've corrected the function and it works as you suggest:

http://www.clumsyfingers.net/scratch/mathjax.html

I also went ahead and started fiddling with the svg to canvas.  It's not quite working, but maybe it will with another library/in time.  I'll leave the link up for posterity.

Thanks again!

Ransome

[mark.h...@btinternet.com]

Hi Ransome

Sorry to dredge up an old topic, but I just wondered if you ever got this working? I'm trying to do much the same thing (get MathJax output to a canvas) without much luck.

Thanks

Mark

[Peter Krautzberger]

Hi Mark,

I recently stumbled upon http://jsfiddle.net/RG7yG/4/ That approach might be worth a try.

Peter.

--

[Ransome Coleman]

Hi Mark,

I never did quite get it, I ended up placing the SVG element on top of the canvas element.  Peter, that jsfiddle looks promising, will try to implement it in my previous project.  I'll update the old link I posted to point to the jsfiddle as well for those looking, thanks for reminding me I had posted this and never quite finished it.

[Peter Krautzberger]

PS: I just noticed another example using Easel.js, http://jsfiddle.net/AndyNovo/7mdMz/ which I got from http://stackoverflow.com/questions/21243632/latex-rendering-in-easeljs -- Peter.

[mark.h...@btinternet.com]

Thanks guys. I'll have a play with those two techniques and see if I get anywhere.

Mark

On Thursday, September 12, 2013 6:59:07 PM UTC+1, ransome...@gmail.com wrote: