'Rendering MathJax output on <canvas>

I have searched this topic, but not able to find a direct answer, and I am also not good in javascript. So I hope someone can show me how to do this.

I simply like to display math inside canvas2D. I use context.fillText to pass string to canvas2d, but that string is clearly not being processed by Mathjax since it is not on the page itself.

Here is a MWE. What do I need to modify this to make math show up on the canvas?

<!DOCTYPE html>

<html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }});
</script>

<script type="text/javascript" 
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>        
</head>    
<body>

</p>Trying to render $\sin(x)$ inside canvas 2D as text</p>

<div>
<canvas id="e" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  context.font = "normal 16px Arial";
  context.fillText("test string", 50, 50);
  context.fillText("$\sin(x)$", 50, 100);
</script>
</div>    
</body>
</html>

The output I get now is

Mathematica graphics

Again, I do understand why it is not working, since the math is inside the string, Mathjax can't see it and process it. But it has to be a string for use by canvas. I can't just write context.fillText($\sin(x)$, 50, 100); without the string quotes, since it will not work.

Might be a related question is this, but not sure.

How do I format html with MathJax after loading it using jQuery.load?

canvasmathjax


Solution 1:[1]

<canvas> text draw operations are separate operations from DOM manipulation and thus Mathjax cannot interact with canvas text rendering operations.

I am not sure if there exists <canvas> renderer backend for MathJax currently. At least it doesn't seem to be so by checking the rendering options on current MathJax demos. Thus, MathJax can only create output on DOM.

Due to security reasons, browsers do not allow rendering DOM on <canvas> directly, though this is technically possible. Otherwise one could steal content from sites you are logged in (e.g. Facebook) by rendering the site in <iframe> and then rendering this <iframe> on canvas.

Solution 2:[2]

I have been trying to figure out the same thing. I did get MathJax onto the canvas element but have not figured out how to use MathJax in the context you described above. But in case this helps here you go. 

$(function () {
    function drawCanvas(){
      $math = $(".MathJax_Display")
      html2canvas($math, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
      }); 
    }
    MathJax.Hub.Queue(drawCanvas);
})

http://jsfiddle.net/masterthornton/umnc40d6/7/

Solution 3:[3]

I found a way to put MathJax equations into cavans. Basically, LATEX -> SVG -> base64 -> cavans.

Use MathJax.tex2svg("F=ma") to convert latex to svg element, and then turn it into base64 format, finally put base64 in cavans as image.

This is my code:

var tex = oriData.nodes[i].latex;
var svg = MathJax.tex2svg(tex);
var svg = svg.childNodes[0]
var ssvg = new XMLSerializer().serializeToString(svg);
var base64 = "data:image/svg+xml;base64, " + window.btoa(unescape(encodeURIComponent(ssvg)));

The base64 is the base64 format eqaution SVG data.

Solution 4:[4]

I'd encourage you to check out: https://github.com/CurriculumAssociates/canvas-latex

It allows you to render latex in popular canvas libraries (like PixiJS/CreateJS). It also provides some powerful api methods to split the latex, add macros, etc.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mikko Ohtamaa
Solution 2 matthew
Solution 3 Lilidream
Solution 4 Ryan Randall

Related Questions