var bounds;

var font;

​

class menuText {

  constructor(_str, _x, _y, _size) {

    this.x = _x;

    this.y = _y;

    this.size = _size;

    this.str = _str;

​

    this.points = font.textToPoints(this.str, 0, 0, this.size, {

      sampleFactor: 5,

      simplifyThreshold: 0,

    });

    this.points_original = font.textToPoints(this.str, 0, 0, this.size, {

      sampleFactor: 5,

      simplifyThreshold: 0,

    });

​

    this.bbox = font.textBounds(this.str, 0, 0, this.size);

    this.set(this.x, this.y);

  }

  set(_x, _y) {

    this.x = _x;

    this.y = _y;

    for (let i = 0; i < this.points.length; i++) {

      this.points[i].x = this.x + this.points_original[i].x;

      this.points[i].y = this.y + this.points_original[i].y;

    }

    this.bbox = font.textBounds(this.str, this.x, this.y, this.size);

  }

  draw() {

    noStroke();

    fill(200);

    rect(this.bbox.x, this.bbox.y, this.bbox.w, this.bbox.h);

    stroke(0);

    beginShape(POINTS);

    for (let i = 0; i < this.points.length; i++) {

      let p = this.points[i];

      vertex(p.x, p.y);

    }

    endShape(CLOSE);

​

  }

}

​

var menu_text;

function preload() {

  font = loadFont("Oswald-VariableFont_wght.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  menu_text = new menuText("hello", 200, 200, 200);

   menu_text.set(width / 2, height / 2);

}

​

function draw() {

  background(255);

  //  menu_text.set(mouseX, mouseY);

  menu_text.draw();

}

​