Rendering MathJax HTML to Canvas

The general idea here is that you can render html as a foreignobject and render it to an image. The final step is to blit it to the canvas. I am using mathjax set to return htmlcss and html2canvas to simplify the foreign object to image wrapping

HTML

<script src="//assets.thinkthroughmath.com/MathJax/MathJax.js?config=MML_HTMLorMML"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<span id='maths' width='200px' height='200px'><math id="my_math" xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mrow><mi>x</mi><mo>=</mo><mfrac><mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></mrow></math></span>

<canvas id='the_canvas' height='200px' width='699px'></canvas>

CSS

body{
    background: teal;
}

JavaScript

startTime = new Date();
MathJax.Hub.Config({})
//MathJax.Hub.Startup.onload();
$(function () {
    onloadTime = new Date();
    var renderedTime = 0
    var replicationTime = 0
    function setReplication(){
      replicationTime = new Date();
    }
    function canvasProcess(){
      $math = $(".MathJax_Display")
      html2canvas($math, {
        onrendered: function (canvas) {
            canvas.id = 'copy'
            document.body.appendChild(canvas);
            $('#the_canvas')[0].getContext('2d').drawImage($('#copy')[0],0,0)
            setReplication()
        },
      }); 
    }
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"maths"]);
    function setRenderedTime(){
      renderedTime = new Date();
    }
    MathJax.Hub.Queue(setRenderedTime);
    MathJax.Hub.Queue(canvasProcess);
    function stats(){
      document.body.appendChild($('<span>Page Loaded At: '+ startTime+'</span>')[0])
      document.body.appendChild($('<br>')[0])
      document.body.appendChild($('<span>OnLoad At: '+ onloadTime+'</span>')[0])
      document.body.appendChild($('<br>')[0])
      document.body.appendChild($('<span>Replication At: '+ replicationTime+'</span>')[0])
      document.body.appendChild($('<br>')[0])
      document.body.appendChild($('<span>Rendered At: '+ renderedTime+'</span>')[0])
      document.body.appendChild($('<br>')[0])
    }
    MathJax.Hub.Queue(stats);
})