我已经搜索了该主题，但无法找到直接答案，而且我也不擅长javascript。因此，我希望有人可以向我展示如何执行此操作。
我只是喜欢在canvas2D中显示数学。我使用context.fillText将字符串传递给canvas2d，但是Mathjax显然不处理该字符串，因为它不在页面本身上。
这是MWE。我需要修改什么才能使数学显示在 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>
我现在得到的输出是
再次，我确实理解了为什么它不起作用，因为数学在字符串内，Mathjax无法看到它并对其进行处理。但是必须是 Canvas 使用的字符串。我不能只写没有字符串引号的
context.fillText($\sin(x)$, 50, 100);，因为它不起作用。可能是与此相关的问题，但不确定。
How do I format html with MathJax after loading it using jQuery.load?
最佳答案
<canvas>文本绘制操作是与DOM manipulation分开的操作，因此Mathjax无法与 Canvas 文本呈现操作进行交互。
我不确定当前是否存在MathJax的<canvas>渲染器后端。至少通过检查当前MathJax演示中的渲染选项似乎并非如此。因此，MathJax只能在DOM上创建输出。
由于安全原因，浏览器不允许直接在<canvas>上呈现DOM，尽管在技术上是可行的。否则，您可以通过以<iframe>呈现该网站，然后在 Canvas 上呈现此<iframe>来从您登录的网站(例如Facebook)中窃取内容。
关于canvas - 在<canvas>上渲染MathJax输出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20852529/