Implementing MathJax: Using JSFiddle, Canvas, and DOM

user_15695111 0
Viewed 66

I was looking at the code here. I am able to get the MathJax part to render correctly when running the MathJax API in the html file. However, I am not able to get MathJax text inside canvas (it appears one line above it). I am wondering what I am doing wrong. I feel like I need to run another extension, API, something to get this to work. Any help would be much appreciated!

<html>
<style>
#gameCanvas {
  background-color: lightblue;
}
</style>
<div class="canvasHolder">
  <div id="latexContent">\(\frac{3}{7}\)</div>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>
<script>
var stage = new createjs.Stage("gameCanvas");
var domElement = new createjs.DOMElement(document.getElementById("latexContent"));
stage.addChild(domElement);
</script>
</html>

jsfiddle mathjax dom javascript
1 Answers

You needed to add the createjs library and the mathjax library (see first two lines after <html>)

<html>
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<style>
#gameCanvas {
  background-color: lightblue;
}
</style>
<div class="canvasHolder">
  <div id="latexContent">\(\frac{3}{7}\)</div>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>
<script>
var stage = new createjs.Stage("gameCanvas");
var domElement = new createjs.DOMElement(document.getElementById("latexContent"));
stage.addChild(domElement);
</script>
</html>

user_121015540
Related