Three.jsのobjectの中央にCanvasの文字を配置するには

下記は正方形のCanvasをTextureにしてobjectに張り付けています。
Canvasは200×200で中央に999.9とGOLDの文字2行があります。
Threejsのobjectに張り付けてみると、文字が端になってしまっています。
どうすれば中央になるでしょうか？

html
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
5<script src="https://d3js.org/d3.v5.min.js"></script>
6<style>
7body {
8  margin: 0;
9  overflow: hidden;
10}
11</style>
12</head>
13<body>
14<div id="WebGL-output">
15</div>
16<script>
17function init() {
18  var scene = new THREE.Scene();
19
20  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
21  camera.position.x = 0;
22  camera.position.y = 54;
23  camera.position.z = 180;
24  camera.lookAt(0, 0, 0);
25
26  var webGLRenderer = new THREE.WebGLRenderer();
27  webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE));
28  webGLRenderer.setSize(window.innerWidth, window.innerHeight);
29  webGLRenderer.shadowMap.enabled = true;
30
31  var ambientLight = new THREE.AmbientLight(0x0c0c0c);
32  scene.add(ambientLight);
33
34  document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
35
36  var step = 0;
37
38  var options = {
39    amount: 2,
40    bevelThickness: 2,
41    bevelSize: 0.5,
42    bevelSegments: 3,
43    bevelEnabled: true,
44    curveSegments: 12,
45    steps: 1
46  };
47  var shape = createMesh(new THREE.ExtrudeGeometry(drawShape(), options));
48  scene.add(shape);
49
50  render();
51
52  function drawShape() {
53    var xy = new Array();
54    xy.push(["M", 75, 40]);
55    xy.push(["C", 75, 37, 70, 25, 50, 25]);
56    xy.push(["C", 20, 25, 20, 62.5, 20, 62.5]);
57    xy.push(["C", 20, 80, 40, 102, 75, 120]);
58    xy.push(["C", 110, 102, 130, 80, 130, 62.5]);
59    xy.push(["C", 130, 62.5, 130, 25, 100, 25]);
60    xy.push(["C", 85, 25, 75, 37, 75, 40]);
61    xy.push(["Z", 75, 40]);
62
63    var shapepath = new THREE.Shape();
64    for (var i = 0; i < xy.length; i++) {
65      if (xy[i][0] == "M") {
66        shapepath.moveTo(xy[i][1], xy[i][2]);
67      } else if (xy[i][0] == "L") {
68        shapepath.lineTo(xy[i][1], xy[i][2]);
69      } else if (xy[i][0] == "C") {
70        shapepath.bezierCurveTo(xy[i][1], xy[i][2], xy[i][3], xy[i][4], xy[i][5], xy[i][6]);
71      } else {
72        shapepath.lineTo(xy[0][1], xy[0][2]);
73      }
74    }
75    return shapepath;
76  }
77
78  function makeCanvas() {
79    const width = 200;
80    const height = 200;
81    const canvas = d3.create("canvas")
82      .attr("width", width)
83      .attr("height", height)
84      .attr("style", "background-color:#ffd700")
85    const context = canvas.node().getContext("2d");
86    context.fillStyle = "#ffd700";
87    context.fillRect(0, 0, width, height);
88    context.textAlign = "center";
89    context.textBaseline = "middle";
90    context.fillStyle = "#C19F4F";
91    context.font = "bold 20px 'ＭＳ ゴシック'";
92    context.fillText("999.9", width / 2, height / 2 - 40, width);
93    context.font = "bold 50px 'ＭＳ ゴシック'";
94    context.fillText("GOLD", width / 2, height / 2, width);
95    return canvas.node();
96  }
97
98  function createMesh(geom) {
99    geom.applyMatrix4(new THREE.Matrix4().makeTranslation(-75, -70, 0));
100    texture = new THREE.Texture(makeCanvas());
101    texture.minFilter = THREE.LinearFilter;
102    texture.needsUpdate = true;
103    const mat = new THREE.MeshBasicMaterial();
104    mat.map = texture;
105    TEXTURE_SCALE = 1 / 70;
106    texture.matrixAutoUpdate = false;
107    texture.matrix.set(TEXTURE_SCALE, 0, 0, 0, TEXTURE_SCALE, 0, 0, 0, 1);
108    texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
109    var mesh = new THREE.Mesh(geom, mat);
110    mesh.rotation.z = Math.PI;
111    return mesh;
112  }
113
114  function render() {
115    shape.rotation.y = step += 0.005;
116    requestAnimationFrame(render);
117    webGLRenderer.render(scene, camera);
118  }
119}
120window.onload = init;
121</script>
122</body>
123</html>