LaTeX Rendering in EaselJS

Question

Is it possible to utilize MathJAX or a variant inside of an EaselJS DisplayObject? I'm open to alternative solutions.

I would like to display some text like $$ 5 + 3 -3 = 5$$ on a canvas which is an EaselJS stage.

Ideally I would like to use the Text Class, i.e.:

new createjs.Text("\( 5 + 3 = 8 \)", "20px Arial", "#ff0000");

Answer 1

So after a bit this was a working solution that I found. It is not perfect, but it can move around:

HTML

<div class="canvasHolder">
    <div id="latexContent">\(3 + 4 = 7\)</div>
    <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>

JavaScript

var stage = new createjs.Stage("gameCanvas");
var domElement = new createjs.DOMElement(document.getElementById("latexContent"));
stage.addChild(domElement);

Here is a demonstration of the snippet working.