[Solved] Programmatically use RGBa values in fillStyle in ?

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?

Enquirer: John

||

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

Solution #2:

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

It is string concatenation.

Respondent: Fabien Ménager

Solution #3:

I’m very late to the party but I had a similar problem and solved it in a slightly different way that may be useful.

Since I needed to reuse the fill colours at different alpha levels, I used the JavaScript replace method:

colurfill = "rgba(255, 255, 0, [[opacity]])";
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.5");
:
:
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.75");

Obviously it doesn’t have to be the alpha level that varies, it could be one of the other channels.

Respondent: Simon Tewsi

Solution #4:

var r_a = 0.3
ctx.fillStyle = `rgba(32, 45, 21, ${r_a})`;

These are called template literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

The back-ticks “ are often found left of the number 1 on the keyboard on US keyboards.

Respondent: NicoWheat

Solution #5:

I was looking for something similar and ran into your post, after reading it, I came up with a solution for myself, I’m working with the audio API and wanted a dynamic color based on a variable coming from the frequency in the sound file. Here’s what I came up with and it woks for now, thought I’d post it in case it helps since I got the inspiration from your question:

function frameLooper(){ 
    window.requestAnimationFrame(frameLooper); 
    fbc_array = new Uint8Array(analyser.frequencyBinCount); 
    analyser.getByteFrequencyData(fbc_array); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
// Clear the canvas 

    bars = 100; 
        for (var i = 0; i < bars; i++) { 
            bar_x = i * 3; 
            bar_width = 2; 
            bar_height = -(fbc_array[i] / 2); 
            bar_color = i * 3;

    //fillRect( x, y, width, height ) 
    // Explanation of the parameters below 
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); 
            ctx.fillStyle = "rgb(100," + bar_color + "," + bar_color + ")" ; 
// Color of the bars
Respondent: Huc

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.