[HTML, canvas, webgl, three.js] webglを描画するcanvasを背景にしたい

実現したいこと

webglを描画するcanvasを背景にして、その上にpタグやdivタグで作った図形を設置したい。

前提

canvasにレンダリング？しているようなのでそのcanvasを、別に用意するテキストなどの下になるように重ねようと試みています。

発生している問題・エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <!-- three.jsのインポート -->
6    <script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
7    <script src="https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
8    <script>
9        // ページの読み込みを待つ
10        window.addEventListener('DOMContentLoaded', init);
11
12        function init() {
13            // サイズを指定
14            const width = window.innerWidth;
15            const height = window.innerHeight;
16
17            // レンダラーを作成
18            const canvasElement = document.querySelector('#myCanvas');
19            const renderer = new THREE.WebGLRenderer({
20                canvas: canvasElement,
21            });
22            // サイズを修正
23            canvasElement.width = width;
24            canvasElement.height = height;
25            renderer.setSize(width, height);
26
27            // シーンを作成
28            const scene = new THREE.Scene();
29
30            // カメラを作成
31            const camera = new THREE.PerspectiveCamera(45, width / height);
32            // カメラの初期座標を設定
33            camera.position.set(0, 0, 1000);
34
35            // カメラコントローラーを作成
36            const controls = new THREE.OrbitControls(camera, canvasElement);
37
38            // 形状とマテリアルからメッシュを作成します
39            const mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300), new THREE.MeshNormalMaterial());
40            scene.add(mesh);
41
42            tick();
43
44            // 毎フレーム時に実行されるループイベントです
45            function tick() {
46                // レンダリング
47                renderer.render(scene, camera);
48                requestAnimationFrame(tick);
49            }
50
51            // myT canvasを取得
52            const board = document.querySelector("#myT");
53            const ctx = board.getContext("2d");
54            // サイズを修正
55            board.width = width;
56            board.height = height;
57            // 見やすくするため大きさと色を変更
58            ctx.font = "48px serif";
59            ctx.fillStyle = "Red";
60            // 文字を追加
61            ctx.fillText("Hello world", 500, 500);
62        }
63    </script>
64    <style>
65        #wrapper {
66            position: relative;
67        }
68
69        #myT {
70            position: absolute;
71            top: 0;
72            left: 0;
73        }
74
75        #myCanvas {
76            position: absolute;
77            top: 0;
78            left: 0;
79        }
80    </style>
81    <title>Document</title>
82</head>
83
84<body>
85    <!-- テキストとwebglを重ねて表示したい！ -->
86    <div id="wrapper">
87        <canvas id="myCanvas"></canvas>
88        <canvas id="myT"></canvas>
89    </div>
90</body>
91
92</html>

試したこと

https://qiita.com/TR246/items/4b84deadb26f1c450722
からcanvas同士でなら重ねられることを知り、はじめ<p>Hello World</p>とcanvasを重ねようとしていたのですがfillText()を用いて文字列を別のcanvasに移してみました。それらcanvasの大きさは同じになるように揃えたところ、重なる部分でオブジェクトの操作ができなくなりました。
そこでオブジェクトが描写されているcanvasにtextをfillText()で追加してみたのですが今度はtextが描写されなくなりました。
上記htmlのcss部分はこの記事を参考に書きました。