Mathjax in Canvas?

[Jacob Strom]

Hi,

I would like to be able to use math formulae in canvas-figures. Is that possible with mathjax? I understand the math is at one point converted to SVG, and it is possible to draw SVG-objects in a canvas.

- Is there any way of getting hold of an SVG object using mathjax?

- Is there any other way of using mathjax inside a canvas?

Best Regards,

-Jacob Strom

[Thomas Leathrum]

I think you can mix the SVG and canvas that way, but I would suggest somethting a bit different:  put the MathJax in a div element and use CSS positioning to place the div over the canvas.  Gives more flexibility in MJ output modes, at least.

[Peter Krautzberger]

> I understand the math is at one point converted to SVG

Not quite. MathJax has two distinct output modes: One is purely HTML-CSS (using local or web fonts), the other is SVG (using no fonts).

[Peter Krautzberger]

[[replying on the MathJax user group]]

Probably not right now -- the SVG output reuses paths (we're planning to add a "self-contained" mode, but no ETA). 

If you can give us more details about your specific situation, Davide might be able to make a more definitive statement than this.

Peter. 

On Tue, Dec 11, 2012 at 4:20 AM, Jacob Strom <jacob...@gmail.com> wrote:

Interesting!

If I would choose the SVG output mode, is there any way to get hold of the SVG object/file, so that I can use it in my canvas?

Thanks in advance,

-Jacob

[Peter Krautzberger]

[[Bringing this back to the User Group. Maybe somebody else can comment -- my canvas expertise is non-existent.]]

On Fri, Dec 14, 2012 at 5:09 AM, Jacob Strom <jacob...@gmail.com> wrote:

Thanks for answering this Peter, 

I see... I guess it will not be possible to render the SVG object in the canvas if the SVG-data contains links. I have obtained some SVG code for $1+1=2$ using document.getElementById("myMathSum").innerHTML but that seems to include links of the kind #MJMAIN as you can see below, I guess that is what you mean by the SVG-file not being self-contained. 

What we basically want to do is to be able to write math inside a figure. Our figure is made using a canvas element. We could of course make the figure bitmapped but then it would not scale with resolution etc.

Thanks again,

-Jacob

   <svg xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 9.478ex; height: 1.784ex; vertical-align: -0.289ex; margin: 1px 0px;" viewBox="0 -676 4081 768">

      <g stroke="black" fill="black" stroke-thickness="0" transform="matrix(1 0 0 -1 0 0)">

         <use xlink:href="#MJMAIN-31"></use>

         <use xlink:href="#MJMAIN-2B" x="727" y="0"></use><use xlink:href="#MJMAIN-31" x="1732" y="0"></use>

         <use xlink:href="#MJMAIN-3D" x="2515" y="0"></use><use xlink:href="#MJMAIN-32" x="3576" y="0"></use>

      </g>

   </svg>

[johann...@gmail.com]

Hey,

is this still the case (that mathjax cannot be moved onto a canvas)?

The reason I ask is that within a contenteditable element it is much easier to deal with images ( try this in Firefox and Chrome: https://bug873883.bugzilla.mozilla.org/attachment.cgi?id=751510 ).

And canvases can be turned into images client side. I see there are things out there such http://fabricjs.com/

If one could do the following with javascript:

<img data-formula="...">

---->

<span data-formula="..."></span>

--Mathjax-->

<span data-formula="..."><SVG>...</SVG></span>

--FabricJs-->

<span data-formula="..."><canvas ...></canvas></span>

---->

<img data-formula="..." src="data:image/png;base64,...">

Then that would probably be the way to go to put formulas into a contenteditable environment as long as Firefox and Chrome don't work consistently around SVGs inside a contenteditable element.

[Peter Krautzberger]

Hi Johannes,

I think nobody has actually tried to put MathJax's output on a canvas. I don't see why this wouldn't work in general. If we can provide APIs to simplify things, then we'd be happy to hear about it.

Best,

Peter.

--
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.

[alexde...@gmail.com]

Hi Peter, All,

 

That is exactly what I'm trying to do. I've been reading around the MathJax website but I can't seem to find what I need for this. Basically, we would like to put a tex string into Jax, and have it output a self-contained SVG string that we convert to an svg image and put into the canvas.

With self-contained I mean: http://jsfiddle.net/ywzwS/

We have a dirty workaround: http://jsbin.com/hahubu/edit?html,output but we'd prefer to be able not to put stuff into the dom, having it render, take it back out etc. Small discussion on this here: https://github.com/almende/vis/issues/548

So my API proposal would be (and apologies if this is already in there, I looked but havent found it so far) to have a method that accepts string input (tex or configurable) and returns a string containing a self-contained SVG. We'd love to make an example for our library vis.js : www.visjs.org / www.github.com/almende/vis

Regards,

Alex

[Peter Krautzberger]

Hi Alex,

Thanks for your message -- vis.js looks great.

>  we'd prefer to be able not to put stuff into the dom, having it render, take it back out etc. 

MathJax needs to work closely to the DOM right now for various technical reasons. So in the short term, there's really no way around this.

> So my API proposal would be to have a method that accepts string input (tex or configurable) and returns a string containing a self-contained SVG

Shouldn't be hard to create an extension that provides this (e.g., MathJax-node does this). It's not quite clear what restrictions canvas has when it comes to importing SVG (<use> has its limitations for security reasons apparently). It seems easier to use the HTML-CSS output right now (see the jsfiddles mentioned here).

Anyway, I've added it to our backlog so we don't loose track. If somebody wants to give it a try, the mathjax-dev mailing or GitHub would be the best place to discuss this further.

Best regards,

Peter.

--

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/d/optout.