canvas fillStyle in interval with transparent/opacity

javascript canvas opacity
user951114 picture user951114 · Sep 18, 2011 · Viewed 40.8k times · Source

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?

Answer

Mubashar Shahzad picture Mubashar Shahzad · Feb 7, 2017

I think this will resolve your issue

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

Related questions

How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More
Capture HTML Canvas as gif/jpg/png/pdf?

Is it possible to capture or print what's displayed in an html canvas as an image or pdf? I'd like to generate an image via canvas, and be able to generate a png from that image.

Read More
Using HTML5/Canvas/JavaScript to take in-browser screenshots

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug. Screenshot by Jason Small, posted in a duplicate question. How are …

Read More