title: Rendering MathJax output on <canvas>
body: <p>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.</p>
  
  <p>I simply like to display math inside canvas2D. I use <code>context.fillText</code> to pass string to canvas2d, but that string is clearly not being processed by Mathjax since it is not on the page itself.</p>
  
  <p>Here is a MWE. What do I need to modify this to make math show up on the canvas?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/x-mathjax-config"&gt;
  MathJax.Hub.Config({tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }});
  &lt;/script&gt;
  
  &lt;script type="text/javascript" 
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"&gt;&lt;/script&gt;        
  &lt;/head&gt;    
  &lt;body&gt;
  
  &lt;/p&gt;Trying to render $\sin(x)$ inside canvas 2D as text&lt;/p&gt;
  
  &lt;div&gt;
  &lt;canvas id="e" width="200" height="200"&gt;&lt;/canvas&gt;
  &lt;script&gt;
    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);
  &lt;/script&gt;
  &lt;/div&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The output I get now is</p>
  
  <p><img src="https://i.stack.imgur.com/2iTJY.png" alt="Mathematica graphics"></p>
  
  <p>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 <code>context.fillText($\sin(x)$, 50, 100);</code> without the string quotes, since it will not work. </p>
  
  <p>Might be a related question is this, but not sure.</p>
  
  <p><a href="https://stackoverflow.com/questions/20767122/how-do-i-format-html-with-mathjax-after-loading-it-using-jquery-load">How do I format html with MathJax after loading it using jQuery.load?</a></p>