Latex on rectangle

General
1

hello, i have seen this example to render latex in stage but it's doesn't work in my case, i am trying to write fraction on squares

import zim from "https://zimjs.com/cdn/016/zim_physics";
import "https://zimjs.com/explore/canvas-latex.js"

    
        
        const assets = ['apple.png', 'rose.png', 'tree10.png'];
        const path = "/assets/";

        var frame = new Frame({
            scaling: FIT, width: 1024, height: 768, color: pink,
            outerColor: dark,
            progress: new Waiter({
                backgroundColor: blue, corner: 10
            }),
            assets: assets, path: path
        });


frame.on("ready", function ready(){
    var stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;

var options = {
  displayMode: true,
  debugBounds: false,
  strict: false
};

   const weights = [
        { equation: "\\frac{1}{8}", color: "red" },
        { equation: "\\frac{2}{8}", color: "black" },
        { equation: "\\frac{1}{4}", color: "orange" },
        { equation: "\\frac{1}{2}", color: "yellow" },
        { equation: "1", color: "green" },
        { equation: "2", color: "blue" }
    ];

   weights.forEach((weight, index) => {
        const square = new Rectangle(80, 80, weight.color)
            .centerReg()
            .pos(100 + index * 100, 100)  .addTo(stage);

            var eq = new CanvasLatex.default(weight.equation, options)
            .scaleTo(square,80)
})
2

This worked for me.

weights.forEach((weight, index) => {
const square = new Rectangle(80, 80, weight.color)
.centerReg({ add: false })
.addTo(stage)
.pos(150 + index * 100, 400);
var eq = new CanvasLatex.default(weight.equation, options);
zimify(eq).addTo(square).centerReg().scaleTo(square, 80, 80);
});

3

which version do you use