22

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?

D_00
  • 1,440
  • 2
  • 13
  • 32
user951114
  • 221
  • 1
  • 2
  • 3
  • 1
    if I clear rect, it clear all old data, but i need save old data and set opacity for it (that why i use rgba color model, ) until the interval made it completely transparent – user951114 Sep 18 '11 at 10:43
  • 2
    maybe set `ctx.globalCompositeOperation = 'destination-out'` and then draw ? – c69 Sep 18 '11 at 10:57
  • Thanks! I tryed with globalCompositeOperation to, but not with this value. – user951114 Sep 18 '11 at 11:12

4 Answers4

23

I think this will resolve your issue

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
Mubashar Shahzad
  • 347
  • 3
  • 8
8

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.

broofa
  • 37,461
  • 11
  • 73
  • 73
3

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

Soyoes
  • 940
  • 11
  • 16
0

Has your problem been solved

I encountered this problem while using Windows computer

I used opacity: .99 solved this problem

高启明
  • 11
  • Hi 高启明, please familiarise yourself with [answering questions](https://stackoverflow.com/help/how-to-answer) before writing your next one. Enjoy your stay at SO :) – Diggy. May 14 '20 at 10:43