I have a nice tidy script that cycles through colors and it works nicely with the #xxxxxx format, but I want to change the transparency. Is there a way to do that?

I'm referring to ctx.strokeStyle()

Here's the current code:

canvas.strokeStyle = '#' + (((16777215 / s.length) * i).toString(16));

It cycles through a for loop with i incremented by 1 each cycle and it's a part of a switch. The for loop looks like this: for(var i = 0; i < s.length; i++){}

I have a nice tidy script that cycles through colors and it works nicely with the #xxxxxx format, but I want to change the transparency. Is there a way to do that?

I'm referring to ctx.strokeStyle()

Here's the current code:

canvas.strokeStyle = '#' + (((16777215 / s.length) * i).toString(16));

It cycles through a for loop with i incremented by 1 each cycle and it's a part of a switch. The for loop looks like this: for(var i = 0; i < s.length; i++){}

• javascript
• canvas

Share Follow edited Aug 15, 2013 at 10:19 JVE999 asked Aug 15, 2013 at 9:11 JVE999JVE999 3,5171212 gold badges6161 silver badges9595 bronze badges 3

• Check this: stackoverflow./questions/8517173/… – Manoj Awasthi Commented Aug 15, 2013 at 9:16
• @Manoj That seems irrelevant. Isn't this question about <canvas>? – Anko Commented Aug 15, 2013 at 9:28
• This is the current code: canvas.strokeStyle = '#' + (((16777215 / s.length) * i).toString(16)); I want it to be partially transparent. @ManojAwasthi It's possible in css and some other applications, but I can't find it in JavaScript for <canvas> – JVE999 Commented Aug 15, 2013 at 10:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can change ctx.globalAlpha in range of 0 to 1 before drawing each element in opacity you need.

Use ctx.globalAlpha like Martin Tale answered or rgba([0-255], [0-255], [0-255], [0-1]) format. So you need to convert the integer to individual rgb values:

var color = ((16777215 / s.length) * i);
var r = (color >> 16) & 255;
var g = (color >> 8) & 255;
var b = color & 255;

var alpha = 0.5;

canvas.strokeStyle = "rgba("+r+","+g+","+b+","+alpha+")";