Programatically use RGBa values in fillStyle in <canvas> ?

Question

Hi,

Posting for the first time here, so if I'm breaking any rules or guidlines here then please let me know gently and I'll keep it in mind for next time...

Im learning programming in <canvas>, and I wanted to do a simple thing in it. I wanted to set the RGBa value of the rectangle I was drawing using some variable.

for example,
var r_a = 0.3;
ctx.fillStyle = "rgba(32, 45, 21, r_a)";

which doesn't work. But ctx.fillStyle = "rgba(32, 45, 21, 0.3)"; does work.

Apparantly fillStyle only accepts a string. So how do I set a value of the rgba value using some variable instead of explicitly defining the values?

Any help will be appreciated! Thanks in advance :)

Answer 1

You just need to concatenate the r_a variable to build the string correctly:

var r_a = 0.3; 
ctx.fillStyle = "rgba(32, 45, 21, " + r_a + ")";

Answer 2

ctx.fillStyle = "rgba(32, 45, 21, "+r_a+")";

It is string concatenation.