How can I optimize my code for rendering nearly 200 texts using 2D canvas rendering? The current method is consuming a lot of memory. Is there a way to reuse the canvas element? Here is a snippet of my current implementation:
var goalCanvas = document.createElement('canvas');
goalCanvas.width = Math.pow(2, Math.round(Math.log(parseInt(name.length) * parseInt(58)) / Math.log(2)));
goalCanvas.height = 128;
var planeGeometry = new THREE.PlaneGeometry(parseInt(name.length) * parseInt(3), 8);
var featureContext = goalCanvas.getContext('2d');
featureContext.fillStyle = "#ffffff";
featureContext.font = "54px roboto_condensedregular";
featureContext.textAlign = "center";
featureContext.fillText(name, goalCanvas.width / 2, 42);
var goalTexture = new THREE.Texture(goalCanvas)
goalTexture.needsUpdate = true;
var goalMaterial = new THREE.MeshBasicMaterial({
map: goalTexture
});
goalMaterial.transparent = true;
var goalNameMesh = new THREE.Mesh(
planeGeometry,
goalMaterial
);