Question

I have various hexadecimal RRGGBBAA colors as stop values in a heat map gradient but I have noticed that setting different Alpha values for some of the stop doesn’t change the opacity in my code, I always get the same view -although setting the last two alpha bits to 00 as 0.0 opacity works for some reason-. The RRGGBBAA values are written like this:

0xaa00007f (the last two bits, 7f should be 0.5 opacity)

0xaa0000ff (ff is the 1.0 opacity)

The setGradientStops function that takes the stop values is like this -this is from a heat map library, not my code-

setGradientStops: function(stops) {


var ctx = document.createElement('canvas').getContext('2d');
var grd = ctx.createLinearGradient(0, 0, 256, 0);

for (var i in stops) {
  grd.addColorStop(i, 'rgba(' +
    ((stops[i] >> 24) & 0xFF) + ',' +
    ((stops[i] >> 16) & 0xFF) + ',' +
    ((stops[i] >>  8) & 0x7F) + ',' +
    ((stops[i] >>  0) & 0x7F) + ')');
}

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 256, 1);
this.gradient = ctx.getImageData(0, 0, 256, 1).data;
}

Answer 1

The problem is that opacity expects a value in the range of 0 – 1 and there you are outputting a value in the range of 0 – 127. I would try…

grd.addColorStop(i, 'rgba(' +
((stops[i] >> 24) & 0xFF) + ',' +
((stops[i] >> 16) & 0xFF) + ',' +
((stops[i] >>  8) & 0xFF) + ',' +
(((stops[i] >>  0) & 0xFF) / 255) + ')');

So it takes the bits from the part that represents the alpha (all of them rather than almost all of them) by using the & bit operator on 0xFF rather than 0x7F. So…

0xFF (11111111) & 0xFF (11111111) = 0xFF (11111111) = 255

Rather than…

0xFF (11111111) & 0x7F (01111111) = 0x7F (01111111) = 127

and then you have the value in the range of 0 – 255, divide by 255 to get this to the required range.

0xFF / 255 = 1, 0x7F / 255 = 0.498, 0x00 / 255 = 0

So then for 0xaa00007f, grd.addColorStop would be given the string 'rgba(170,0,0,0.498)'