javascriptで変数にHTMLタグを入れる（？）には？（分数を描写したい）

fabric.jsを使用してcanvas要素を操作しています。

javascript
1		var Canvas = new fabric.Canvas('mycanvas');
2        var t ="がんばろう！";
3        
4        var rect = new fabric.Text(t,{
5            left: 80, top: 80,
6            fill: 'white',
7            stroke: 'white',
8            strokeWidth: 2,
9            fontFamily: "UD デジタル 教科書体 N-R",
10		fontSize: window.innerWidth/7
11    });
12    Canvas.add(rect);

これまではrectに対して数値や文字列を入れることで問題なく動いてきました。
今回ただの文字列ではなく、分数を表記したと思います。

css
1    .fraction{
2    display: inline-block;
3    vertical-align: middle;
4    text-align: center;
5    font-size: 5vw;
6    color: aliceblue;
7    }
8    .fraction_n,.fraction_d{
9    display: block;
10    }
11    .fraction_n{
12    border-bottom: 5px solid rgb(218, 213, 213);
13    }

html
1    <p>
2        <span class="fraction">
3          <span class="fraction_n">2</span>
4          <span class="fraction_d">3</span>
5        </span>
6      </p>

つまり変数rectに上記のHTMLタグを代入したいのですが、そのやり方がよくわかりません。createElementやinnerHTMLなどはそもそもHTMLの要素に働きかけるものだと思いますので、違う方法だと思いますが、これが分かりません。canvas内の要素といて操作をしたいので、fabricを使用しながらcanvasに描写したいのです。

どなたか知恵やアドバイスを頂けないでしょうか。

yambejp

2021/11/25 04:21

結局具体的にどう表示されればよいのですか？前後のつながりは気にしないで良い？

kihokutarou

2021/11/25 04:26

現在初期状態の「がんばろう」がcanvas内に描写されています。移動拡大縮小できる形です。このテキストに代わって任意の分数を入れたいのです。前後のつながり、というのが私のソースのことであれば気にされないで構いません。分数自体の前後のことであれば、こちらも2/3が表記できれば応用させていきます。最終的にはボタンを押すたびに分数のたし算が出題される形を目指しています。 ※現在は整数のたし算ひき算かけ算わり算等を置いています。

yambejp

2021/11/25 04:30

「2/3」は分数ですが、別の表記ということですよね？具体的に図示されたほうがよいでしょう。多分回答しても見た目が違うと言い出すと思います

kihokutarou

2021/11/25 04:34

なるほど。 http://atm-tkd.sakura.ne.jp/math/etc/bunsu/bunsuhyoki110218.html やりたいことはいわゆるこういう形となります。つまり小学校や中学校で書く分数の形、分子と分母が上下に並び、その間に水平の線分が入る形となります。

yambejp

2021/11/25 04:37

文字の表示についてはcanvasよりsvgの方がすんなりいくと思いますが canvasがマストなのでしょうか？

kihokutarou

2021/11/25 04:42

svgについては詳しくありませんが、簡単に文字や注釈を書き込めるのとこれまでの自分自身の知識としてcanvasをマストとしたく思います。確かに画像（？）やテキストを貼り付ける方がすんなりいくかなぁとも思いますが勉強する時間がt理想にありません。