ThreeJs 2d canvas text rendering memory issue

Question

I am rendering nearly 200 texts for that I am using 2D canvas rendering. It is taking more memory, is there any way to reuse the canvas element. Below is my working code.

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
);

Answer 1

the creation of a new canvas must only happen once, only run the code that actually adds the text:

var planeGeometry = new THREE.PlaneGeometry(parseInt(name.length) * parseInt(3), 8);
goalCanvas.height = 128;
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
);

if you are using this in a function, it should look something like this:

function AddText(canvas,name)
{
    var planeGeometry = new THREE.PlaneGeometry(parseInt(name.length) * parseInt(3), 8);
    var featureContext = canvas.getContext('2d');
    featureContext.fillStyle = "#ffffff";
    featureContext.font = "54px roboto_condensedregular";
    featureContext.textAlign = "center";
    featureContext.fillText(name, canvas.width / 2, 42);
    var goalTexture = new THREE.Texture(canvas)
    goalTexture.needsUpdate = true;
    var goalMaterial = new THREE.MeshBasicMaterial({
        map: goalTexture
    });
    goalMaterial.transparent = true;
    var goalNameMesh = new THREE.Mesh(
        planeGeometry,
        goalMaterial
    );
    return {"goalNameMesh": goalNameMesh, "goalTexture": goalTexture, "goalMaterial":goalMaterial, "featureContext": featureContext};
}


var goalCanvas = document.createElement('canvas'); //this should only run once
goalCanvas.width = Math.pow(2, Math.round(Math.log(parseInt(name.length) * parseInt(58)) / Math.log(2)));//and this
goalCanvas.height = 128;//and this
var addedText = AddText(goalCanvas, name) //you can loop this line for each text that you want to add, and it will return an object with all the handles in it