How to change opacity in javascript canvas

Question

function Paint(){
var Size = document.getElementById('Size').value;
var Opacity = document.getElementById('opa').value;
var color = document.getElementById('color').value;
canvas = document.getElementById('PaintArea');
if(canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(musX-10, musY-10, Size, 0, Math.PI*2); 
    ctx.closePath();
    ctx.fill();
}
}

As you can see i have the fillStyle by a user input in my HTML, but how do i get the opacity in there?

urbz · Accepted Answer · 2014-04-09 12:08:46Z

2

Try this: [Updated]

ctx.globalAlpha = Opacity;

Or just set the value:

ctx.globalAlpha = 0.2;

edited Apr 9, 2014 at 12:08

answered Apr 9, 2014 at 11:49

urbz

2,6671 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ZeppRock Over a year ago

Worked! I had to do "ctx.globalAlpha = Opacity"

Systematix Infotech · Accepted Answer · 2014-04-09 11:45:44Z

0

Please use fillstyle with color:

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

For Image please use:

context.globalAlpha = 0.5;

Here is the complete link:

http://www.w3schools.com/tags/canvas_globalalpha.asp

answered Apr 9, 2014 at 11:45

Systematix Infotech

2,3751 gold badge16 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to change opacity in javascript canvas

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related