Cant get Image Converter to work ? What do the transparency options mean ?

I'm trying to upgrade widhrt with a better icon.

I'm using the imageconverter at:
https://espruino.github.io/EspruinoWebTools/examples/imageconverter.html

I wanted to use a full RED heart when the HRM is on, and then White or Black when Off depending on background. The existing image works fine except it uses grey when off and the image is quite delicate and hard to see, my original choice - not so good.

So I have downloaded a new image of a full red heart on a transparent background.
https://icons8.com/icons/set/heart

I am just struggling to get the color fill to work. No matter what options I seem to choose from the
imageconverter I either just get a RED heart or a white heart on a black background.

File below
and code below.
What am I doing wrong ?

(function(){
  if (!Bangle.isHRMOn) return; // old firmware
  var hp = Bangle.setHRMPower;
  Bangle.setHRMPower = () => {
    hp.apply(Bangle, arguments);
    WIDGETS.widhrt.draw();
  };

  WIDGETS.widhrt={area:"tr",width:24,draw:function() {
    g.reset();
    if (Bangle.isHRMOn()) {
      g.setColor('#f00');     // on = red
    } else {
      g.setColor(g.theme.dark ? '#0f0' : '#00f'); // off
    }

    // 3 bit rgb, no options, just red heart on black all the time
    g.drawImage(atob("FBQDAAAAAAAAAAAAAAAAAAAAAAEgAAEgAAAkkkgEkkkAEkkkkkkkkgEkkkkkkkkgEkkkkkkkkgEkkkkkkkkgEkkkkkkkkgEkkkkkkkkgAkkkkkkkkAAEkkkkkkgAAAkkkkkkAAAAEkkkkgAAAAAkkkkAAAAAAEkkgAAAAAAAkkAAAAAAAAEgAAAAAAAAAAAAAAAAAAAAAAAA"), 1+this.x, 1+this.y);
    
    // 3 bit rgb, transparency:Y, background follows theme, but wont fill with color
    //g.drawImage(atob("FBSDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJJAAJJAAAJJJIBJJJAAJJJJJJJJABJJJJJJJJIBJJJJJJJJIAJJJJJJJJAAJJJJJJJJAABJJJJJJIAAAJJJJJJAAAABJJJJIAAAAAJJJJAAAAAABJJIAAAAAAAJJAAAAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="), 1+this.x, 1+this.y);

    // 3 bit rgb, transparency:Y, transpareny to color Y, just shows white all the time
    //g.drawImage(atob("FBSDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//wAP/wAAP//+B///wAP///////wB////////+B////////+AP///////wAP///////wAB//////+AAAP/////wAAAB////+AAAAAP///wAAAAAB//+AAAAAAAP/wAAAAAAAB+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="), 1+this.x, 1+this.y);

    // 3 bit rgb, transpareny to color Y, black background, white heart
    //g.drawImage(atob("FBQDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//AA//AAA///4H///AA////////AH////////4H////////4A////////AA////////AAH//////4AAA//////AAAAH////4AAAAA////AAAAAAH//4AAAAAAA//AAAAAAAAH4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"), 1+this.x, 1+this.y);
    
  }};
})();

2 Attachments