Layout library redraw changing string size help

Hi,
This was hard to put in a short title. I am still battling the layout library and am asking for help with it, again. The issue I am facing right now is that if a longer string is drawn first and then a short one, the longer one isn't cleared from the screen, only the part where the newer (short one) is drawn.

I haven't found a way to make a minimal working example yet, here is the full code. If you load it into a watch and press the right side of the touchscreen a couple times until the 4 liner string shows up and then another time, it should look like the attached screenshot. If I try to do this with hard coded strings, it clears the whole screen, which is what I expected the code to do tbh.

I am also not sure I grab fully the concept of laying out elements with the library. What I would love in the end: Tell the library to take the full screen minus the widgets bar, take the string I supply and choose the correct fontsize/font to fill out the whole screen with the string. Either with linebreaks or without, I don't care, for a string without linebreaks the wrap option seems to exists? This should happen indepedent of the actual screen size ofc since the Bangles have different screens. The current implementation works, but just with try and error and the strings are the same size, which make them look a bit tiny when the string is small.

And then later on I need to replace this one layout with a completely different one which shows the current time in like two thirds of the screen and the date in the other third, but thats a bridge I will cross when I get there.

1 Attachment

I believe if you give the element a background colour, it should get cleared properly:

var Layout = require("Layout");
var clockLayout = new Layout( {
      type:"txt", font:"15%", label:"Hello World", id:"clock", bgCol:g.theme.bg
    });

const utils = {
  random_element: function(array) {
  return array[Math.floor(Math.random() * array.length)];}
};

const words = {
  approx: ['\'Bout', 'About', 'Around', `Summat\nlike`, 'Near', 'Close to'],
};

function draw() {
  clockLayout.clear();
  clockLayout.clock.label = utils.random_element(words.approx) + "\nHalf past\nnine";
  clockLayout.render();
}
g.clear();
// can put draw(); here
Bangle.setUI("clock");  // Show launcher when middle button pressed
Bangle.loadWidgets();
Bangle.drawWidgets();
draw();
Bangle.on('touch', function(button, xy) {
    if (button == 1);
    else{
      draw();
    }
  });