CODEWITHSUNDEEP
javascriptcanvasopacity
user951114
user951114

Reputation: 261

canvas fillStyle in interval with transparent/opacity

This small code clear old canvas data in interval:

// start interval
ctx.save();
    ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
    ctx.fillRect(0, 0, ctx.width, ctx.height);
ctx.restore();
//some draw code for new graph
...
//end interval

My work area become black, because I set black as fill color (rgba(0, 0, 0, .2)), but I need a transparent background, not black.

I tried use globalAlpha and imagePutData but I failed.

How I can do this?

Upvotes: 26

Views: 65615

Answers (4)

高启明
高启明

Reputation: 11

Has your problem been solved

I encountered this problem while using Windows computer

I used opacity: .99 solved this problem

Upvotes: 0

Mubashar Shahzad
Mubashar Shahzad

Reputation: 416

I think this will resolve your issue

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

Upvotes: 30

Soyoes
Soyoes

Reputation: 940

try ctx.canvas.width, instead of ctx.width

Upvotes: 3

broofa
broofa

Reputation: 38122

Using an rgba(0,0,0,.2) fillStyle and fillRect() works for me on both chrome and firefox - it paints a semi-transparent black fill. Check to make sure you're not doing something else that's causing a fully opaque paint of some sort.

Upvotes: 8

Related Questions