嘿，我来帮你搞定这个问题！你碰到的两个错误其实都是因为MathJax v3的加载时机和API用法和你预想的不一样，咱们一步步来修复：

问题根源拆解 #

1. MathJax未定义：你引入的MathJax脚本是async异步加载的，这意味着你的JS代码可能在MathJax脚本完全加载并初始化之前就执行了，自然找不到MathJax全局对象。
2. MathJax.tex2svg未定义：MathJax v3的API和旧版本（v2）差异很大，tex2svg不再是直接挂在MathJax上的方法，得用v3的正确调用方式。
3. 你代码里还有个小疏漏：base64是字符串，不能给它加load事件，得先创建Image对象来加载这个base64资源。

修复后的完整代码 #

HTML部分

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

JS部分

// 等待MathJax完全加载并初始化完成
MathJax.startup.promise.then(() => {
  var canvas = document.getElementById('surface');
  var ctx = canvas.getContext('2d');
  canvas.width = 202;

  var tex = "F=ma";
  // 使用MathJax v3的异步方法生成SVG
  return MathJax.tex2svgPromise(tex);
}).then((svg) => {
  var ssvg = new XMLSerializer().serializeToString(svg);
  var base64 = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(ssvg)));
  
  // 创建Image对象加载base64格式的SVG图片
  const img = new Image();
  img.addEventListener("load", (e) => {
    ctx.drawImage(img, 105, 15, 102.3, 23.93);
  });
  img.src = base64;
}).catch((err) => {
  console.error('处理MathJax时出错:', err);
});

关键说明 #

• 用MathJax.startup.promise等待MathJax初始化完成，确保调用API时MathJax对象已经存在。
• 使用MathJax.tex2svgPromise代替旧的tex2svg，这是v3推荐的异步处理方式，避免阻塞页面。
• 把canvas绘制逻辑放在Image的load事件里，确保图片加载完成后再执行绘制操作。

这样修改后，应该就能解决你遇到的两个错误，顺利把公式渲染到canvas里啦！

备注：内容来源于stack exchange，提问作者wilsonw