加载该文件后，控制台显示“MathJax未定义”，但我不知道该如何解决，尽管尝试了很多方法。我也试过为MathJax添加一些代码，但随后它显示MathJax.tex2svg未定义，因此我确实需要帮助。

var canvas = document.getElementById('surface');
var ctx = canvas.getContext('2d');

canvas.width = 202;

var tex = "F=ma";
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)));

base64.addEventListener("load", (e) => {
  ctx.drawImage(base64, 105, 15, 102.3, 23.93);
});

<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元素上使用了 async 关键字。

它会让脚本异步加载，从而在执行使用它的代码时，MathJax 尚未加载。

另外还有一些额外的问题：

• base64 在你的示例中只是一个字符串，并非图像，作为字符串它没有任何事件，因此 addEventListener 会失败，
• 你需要创建 Image 对象，以便把它的源设置为 base64

下面的代码片段不会抛出前面提到的错误，并且已纠正上述问题：

window.addEventListener("load", () => {

  const canvas = document.getElementById('surface');
  const ctx = canvas.getContext('2d');
  canvas.width = 202;
  canvas.height = 100;

  const tex = "F=ma";

  // Convert TeX to SVG
  const node = MathJax.tex2svg(tex);
  const svg = node.querySelector("svg");

  // Serialize SVG
  const ssvg = new XMLSerializer().serializeToString(svg);
  const base64 = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(ssvg)));

  // Create image
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 10, 10);
  };

  img.src = base64;

});

<canvas id="surface">Canvas not Supported</canvas>

<script type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>