求助：将TeX转换为SVG过程中MathJax未定义及MathJax.tex2svg未定义问题的解决方法

你遇到的问题核心有两个：一是MathJax是异步加载的，你的代码在它完全初始化前就执行了；二是MathJax 3的API和旧版本差异很大，tex2svg的调用方式变了。下面给你一步步修正的方案：

问题拆解 #

1. 异步加载导致的提前执行：你给MathJax的脚本加了async属性，浏览器会后台加载它，但你的业务代码可能在MathJax还没加载完成时就跑了，自然会抛出MathJax is not defined。
2. API版本不兼容：MathJax 3里，tex2svg不再是全局MathJax对象的直接方法，必须等MathJax完成初始化后才能调用。
3. 图片加载逻辑错误：你把base64字符串当成DOM元素绑定load事件，这是不对的，得创建Image实例来加载这个base64资源。

修正后的完整代码 #

HTML + JavaScript 完整实现 #

<canvas id="surface">Canvas not Supported</canvas>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<script>
// 等待MathJax加载并完成初始化
MathJax.startup.promise.then(() => {
  const canvas = document.getElementById('surface'); 
  const ctx = canvas.getContext('2d'); 
  canvas.width = 202; 
  const tex = "F=ma"; 

  // 使用MathJax 3的正确API生成SVG
  const svg = MathJax.tex2svg(tex);
  const svgElement = svg.firstChild;

  // 把SVG序列化为字符串并转成base64格式
  const serializer = new XMLSerializer();
  const svgString = serializer.serializeToString(svgElement);
  const base64 = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgString)));

  // 创建Image实例加载base64资源，加载完成后绘制到canvas
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 105, 15, 102.3, 23.93);
  };
  img.src = base64;
});
</script>

关键改动说明 #

• 等待MathJax初始化：用MathJax.startup.promise.then()包裹核心逻辑，确保只有当MathJax完全加载并初始化完成后才执行代码，从根源解决MathJax is not defined的问题。
• 正确调用tex2svg：MathJax 3中MathJax.tex2svg是可用的，但必须在初始化完成后调用，之前的错误就是因为代码执行太早，API还未挂载到全局对象上。
• 修复图片加载逻辑：base64是字符串，不能直接绑定load事件，创建Image实例并设置其src为base64，在onload回调中执行canvas绘制，确保图片加载完成后再渲染。

这样修改后，应该就能正常把LaTeX公式渲染到canvas上了。

内容的提问来源于stack exchange，提问作者wilsonw