Getting sizes of canvas objects

Hi :slight_smile:

I’m having a bit of trouble working on a component to get text wrap functionality within my canvas (I’m a bit of a novice with js and three). Basically, I need to get the width and height of the text so that I can iterate down through text sizes until it fits within the area of the shape the text is being applied to.

I have been trying to use .getSize to achieve the above, but I can’t get it to read.

My code is as below:

First creating a text object method:

function AddText(x, y, z, descriptor, size, height, loader, scene) {
loader.load(HELVETIKER_FONT_BASE64, function (font) {
        let textGeo = new THREE.TextGeometry(descriptor, { font: font, size: size, height: height });
        let textMat = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffffff });
        let texts = new THREE.Mesh(textGeo, textMat);
        texts.position.set(x, y, z);

Next, the beginnings of my text wrap function:

let description = [];
function WriteToCanvas(event) {
    if (description.length > 0 && description.length % 9 != 0) {
        if (event.key !== "p") {
            description += event.key;
        //else {
        //    description.pop();
    else {
        description += "\n";
        description += event.key;
    //if (description.length > 3) {
    return AddText(/*GetStringX(description)*/0, 0, 0, description.toString(), 10, 0.05, loader, scene);   
    //return null;

Finally, the text is placed within a keypress event listener

    window.addEventListener('keypress', WriteToCanvas);

Can anyone advise how and where I might be able to get the pixel height and length, such that I can modify the text size before placing? You can see my failed console log attempts throughout…