MathJax – Supporting $ $ delimeters within HTML – Canvas

I am able to add DOM elements to HTML canvas via the code.

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->

<style>
#gameCanvas {
  background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
  <div id="eqn1"> $3+3=$<input type="text" id="q1j" />
    </div>
  <div id="eqn2"> 3+2=<input type="text" id="q2j" />
    </div>
  <div id="eqn3"> 5+2=<input type="text" id="q3j" />
    </div>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
var quest=[];
quest[m]= document.getElementById(`q${m}j`);

  var values = [];
  var stage = new createjs.Stage("gameCanvas");
  var obj=[];
  can = document.getElementById("gameCanvas");
function response(){
    alert("New Question");
    document.getElementById(`eqn${m}`).remove();
    m=m+1;
    
    quest[m] = document.getElementById(`q${m}j`);
    quest[m].addEventListener("keyup", enterFunction);
    values[m] = document.getElementById(`q${m}j`);
    obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
    obj[m].x = Math.random()*can.width;
    obj[m].y = 0.5;
    stage.addChild(obj[m]);
}
function startGame() {  
    quest[m].addEventListener("keyup", enterFunction);
    values[m] = document.getElementById(`q${m}j`);
    obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
    obj[m].x = Math.random()*can.width;
    obj[m].y = 0.5;
    stage.addChild(obj[m]);
    createjs.Ticker.addEventListener("tick", handleTick);
    createjs.Ticker.setFPS(2);
    function handleTick(event){
    drop(m);
    stage.update();
    }
}
 function drop(i){
      obj[i].x += 1;
      obj[i].y +=3;
 }
 function enterFunction(){
  if (event.keyCode === 13 ) {
   document.getElementById("myBtn").click();
   }
 }
</script>
<body onload="startGame();">
    <div >
  <canvas>This browser or document mode doesn't support canvas object.</canvas>
    </div>
</body>
<button id="myBtn" onclick="response()">New Question</button>
</html>

When I teach math, I typically make a worksheet where the delimeters are set to $ $ (i.e. single dollar signs around math equations (see question of the post here). I also attached the code to change the delimeters accordingly below.

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\(', '\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

Placing the delimeters inside, e.g. the $3+3$ part, messes up the code to the point where it does not work. I do not know if it is jquery or something that isn’t allowing it, but I would really any help to get the $ $ delimeters to respond within div elements in canvas by adding the tiny bit of code above to canvas. I can get them to work if the delimeters are like this (3+3) but I do not want that.