Chrome: Rendering RGBA Colors?

[Jerba]

I’ve been having some issues with rendering RGBA values in Chrome lately and It’s really frustating I was just wondering if anybody is having the same problem? It only seems to be when I’m generating random RGBA parameters with Javascript, if I for example, draw a box and set the fillStyle to rgba(0, 0, 0, 0.1); it will draw perfectly find, however, if I use any randomly generated values, it seems to show us as black in Chrome.

Excuse the perhaps strange formatting, I’m working on a small screen.

this.color = 
    'rgba('
        + getRandomInteger(1, 255) + ', '
    + getRandomInteger(1, 255) + ', '
    + getRandomInteger(1, 255) + ', '
    + getRandomValue(0.1, 1) + ');';

// get a random integer value between a defined range
function getRandomInteger(min_value, max_value) {
    return Math.floor(Math.random() * (max_value - min_value)) + min_value;
}

function getRandomValue(min_value, max_value) {
    var ran = Math.random() * (max_value - min_value) + min_value;
    var num = ran.toFixed(2);
    return num;
}

They’re the methods I’m using and below is a Codepen example. The pen below works perfectly fine in Safari.

http://codepen.io/Responsive/pen/WvzeQW

Note: I don’t intend this thread to be a Javascript focused thread, however, if a moderator feels it will be better suited elsewhere on the forum, please feel free to move the thread to the relevant category.

Thanks.

[Jerba]

Note: I figured out why this occurs. Basically, Chrome apparently doesn’t like it when you provide the semi-colon in the string following the RGBA, For example:

Chrome will have issues rendering this:

this.color = 
    'rgba('
        + getRandomInteger(1, 255) + ', '
        + getRandomInteger(1, 255) + ', '
        + getRandomInteger(1, 255) + ', '
        + getRandomValue(0.1, 1) + ')<strong>;</strong>';

But, not this…

this.color = 
    'rgba('
        + getRandomInteger(1, 255) + ', '
        + getRandomInteger(1, 255) + ', '
        + getRandomInteger(1, 255) + ', '
        + getRandomValue(0.1, 1) + ')';

[Author]

Posts