Variable opacity in JS

Question

I would like to add opacity to predefined colors, as in ("blue",0.7) and express it through a variable alpha so I can change it in time.
The closest I have come that works is something like
this.color = "rgba(0,160,0,"+alpha+")";

Could I use predefined names? Or modify the opacity later, at display method? (Complains about modifying read only if not defined)

Answer 1

From https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes
Answer by Sadern Alwis looks promising,

Download & include the w3color.js from w3school.
https://www.w3schools.com/colors/colors_converter.asp

then in your script you can use any of the following functions:

let c = w3color("violet");
c.darker(n)
c.desaturate(n)
c.isDark(n)
c.lighter(n)
c.saturate(n)
c.toCmyk()
c.toCmykString()
c.toCmykStringDecimal()
c.toHexString()
c.toHsl()
c.toHslString()
c.toHslStringDecimal()
c.toHslaString()
c.toHwb()
c.toHwbString()
c.toHwbStringDecimal()
c.toHwbaString()
c.toName()
c.toNcol()
c.toNcolString()
c.toNcolStringDecimal()
c.toNcolaString()
c.toRgb()
c.toRgbString()
c.toRgbaString()

Answer 2

thank you for the detailed answer! I had come accross this but I was wondering if there was a way to decouple the opacity and set it independently. I want to use it to reflect the lifespan of a particle (and perspective?) and have it slowly fade as the program evolves. I am trying not to depend on libraries because most do not seem to work on my ipad (I can see your amazing perspective code on my phone but not on the ipad, same with all of chill pill's codes). As I only need a binch of colors I can store their rgb or hex codes, but i will need to assemble the fillStyle on the fly to change it, apparentle. I have found instances where opacity was set separately but they may be html or css as I could not make them work in my js.

Answer 3

Louis I found it! Maybe it can be non-global too.
context.globalAlpha = 0.5;
I used it here for the branches on the color defined as sienna, then I reset it so the leaves are not transparent. I can tie it to a variable.

https://code.sololearn.com/WPFkPK6NCYtl/?ref=app

but I found lots of interesting stuff I did not know in your post