canvasに文字を入れたい

canvasに文字を追加したいと考えたのですが
どうしても文字が出てきません。
z-indexをかえてみたり<div>要素をposition:absoluteで
浮かしてみたりしましたが無理でした。

ついでにcanvasのサイズの変更方法も教えていただけると
助かります。

こちらはcssで指定してみましたが無理でした。

html

css

body {
margin: 0;
overflow: hidden;
top: 0;
left: 0;
}

canvas {
width: 100%;
height: 100%;
top: 0;
left: 0;
}

Javascript

window.addEventListener('load', init);

function init() {
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#canvas'),
antialias: true
});
// シーンを作成
const scene = new THREE.Scene();

// カメラを作成
const camera = new THREE.PerspectiveCamera(45, 1);
camera.fov = 40;
camera.position.set(0, 0, 1000);

// Load GLTF or GLB
const loader = new THREE.GLTFLoader();
const url = './img/pp12.glb';


let model = null;
loader.load(
    url,
    function (gltf) {
        model = gltf.scene;
        model.scale.set(100.0, 100.0, 100.0);
        model.position.set(0, 0, 0);
        //回転の調整
        //model.rotation.y = THREE.Math.DEG2RAD * -45;
        scene.add(model);
    },
    function (error) {
        console.log('An error happened');
    }
);
//テクスチャをガンマ補正
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
	


// ライト追加
hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x4169e1, 1.8);
scene.add(hemisphereLight);

// 初回実行
tick();
onResize();

// リサイズイベント発生で実行
window.addEventListener('resize', onResize);

function onResize() {
    // サイズを取得
    const w = window.innerWidth;
    const h = window.innerHeight;
    // 描画サイズ
    renderer.setSize(w, h);
    // ピクセル比
    renderer.setPixelRatio(window.devicePixelRatio);
    // 空間の背景色　//0xから始まる16進数の色コード
    renderer.setClearColor(0xe4f8ec);

    // カメラのアスペクト比を正す
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    console.log('h' + h + 'h' + h);

    // レンダリング
    renderer.render(scene, camera);
}

function tick() {
    requestAnimationFrame(tick);
    //回転
    if (model) {
        model.rotation.y += 0.05;
    }
    renderer.render(scene, camera);
}