Javascript Put 4 integers in the RGBA range

user_12777947 0
Viewed 121

I have a function that puts 4 integers in the RGBA range. In other words, it takes 4 integers, puts the first 3 in the 8-bit range (0-255) (decimal don't matter) and puts the 4th number in the range of 0-1. And then it makes the fillStyle to that color. (It's important that this all happens in the function because I want to use random Math operations on the numbers)

Here's the code:

function FillColor(r,g,b,a){
    if (r > 255){r = 255;}
    if (g > 255){g = 255;}
    if (b > 255){b = 255;}
    if (a > 1){a = 1;}

    if (r < 0){r = 0;}
    if (g < 0){g = 0;}
    if (b < 0){b = 0;}
    if (a < 0){a = 0;}

    ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
}

My problem is that it looks unnecessarily long and it mainly just repeats itself. Is there a better way to do this?

range colors javascript
4 Answers

Try this:

function FillColor(r, g, b, a) {
  for (let i = 0; i < arguments.length; i++) {
    if (i === 3) arguments[i] = Math.min(Math.max(parseInt(arguments[i]), 0), 1);
    else arguments[i] = Math.min(Math.max(parseInt(arguments[i]), 0), 255);
  }

  ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
}
user_78231520

You can use ternary operator:

 r = (r > 255) ? 255 :(r < 0 ) ? 0 : r

example:

<html>
<script type="application/javascript">
    function FillCOllor(r) {
        r = (r > 255) ? 255 : (r < 0) ? 0 : r
        console.log(r)
    }
</script>
<body>
<button onclick="FillCOllor(-12)">click</button>
</body>
</html>

user_81743110 

// Your code:
/*function FillColor(r,g,b,a){
    if (r > 255){r = 255;}
    if (g > 255){g = 255;}
    if (b > 255){b = 255;}
    if (a > 1){a = 1;}

    if (r < 0){r = 0;}
    if (g < 0){g = 0;}
    if (b < 0){b = 0;}
    if (a < 0){a = 0;}

    ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
}*/

// Updated function (assuming you can use ES6/ES2015):
function FillColor(r, g, b, a) {
  const rgb = (v) => v < 0 ? 0 : v > 255 ? 255 : v;
  const alpha = a < 0 ? 0 : a > 1 ? 1 : a;
  
  // You can replace this "return" with your "ctx.fillStyle", but it doesn't work for this example to log the values out.
  return `rgba(${rgb(r)}, ${rgb(g)}, ${rgb(b)}, ${a})`;
}

// Updated function (assuming you are bound to ES5):
function FillColorEs5(r, g, b, a) {
  var rgb = function(v) {
    return v < 0 ? 0 : v > 255 ? 255 : v;
  }
  var alpha = a < 0 ? 0 : a > 1 ? 1 : a;
  
  // Same thing here...you can replace the "return" with your "ctx.fillStyle" instead.
  return "rgba(" + rgb(r) + ", " + rgb(g) + ", " + rgb(b) + ", " + alpha + ")";
}

// Sample running function:
console.log(FillColor(1, 2, 354, 0.1));
console.log(FillColorEs5(1, 2, 354, 0.1));

user_11166220 
function FillColor(red,green,blue,alpha){
  let [r,g,b] = [red,green,blue].map(c => Math.max(0, Math.min(255, c)));
  let a = Math.max(0, Math.min(1, alpha));
  ctx.fillStyle =  `rgba(${r}, ${g}, ${b}, ${a})`;
}
user_6757210
Related