Programmatically use RGBa values in fillStyle in <canvas>?

Question

Using <canvas>, I want to set the RGBa value of the rectangle using a variable.

for example:

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

works fine, but using it with a variable:

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

doesn't work.

Apparently 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?

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 + ")";