Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #39140

Re: Problems with Canvas fade in

From Arno Welzel <usenet@arnowelzel.de>
Newsgroups comp.lang.javascript
Subject Re: Problems with Canvas fade in
Date 2020-11-13 09:36 +0100
Message-ID <i16urnFu046U1@mid.individual.net> (permalink)
References <b59344c2-fe89-45c7-9d4f-0b8961f9e866n@googlegroups.com>

Show all headers | View raw


aaron...@gmail.com:

> I am trying to get text fading in and out with Canvas. Fade out is working well but fade in does not work smoothly at all.
> 
> I did a jsfiddle of what I have got :-
> 
>      https://jsfiddle.net/AaronNGray/jwxLv0f2/1/
> 
> Would really appreciate if someone can look over this and find out whats wrong with it. I am getting exactly the same thing happen if I use alpha too.
> 
> It all seems nonlinear on fade in but fine on fade out.

This is the reason, why fade in does not work:

                    if (rgb < 255) {
                        canvas.width = canvas.width;
                    }
                    else {
                        clearInterval(interval);
                        delay();
                    }

In fact you clear the canvas *after* you have drawn the text for fade
in. This should be:

                    if (rgb > 255) {
                        clearInterval(interval);
                        delay();
                    }

Also clearing the canvas is not be done by setting its width. Yes,
setting the width or height will clear it. But this is more a side
effect than an official way to do this. A better approach:

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

-- 
Arno Welzel
https://arnowelzel.de

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread


Thread

Problems with Canvas fade in "aaron...@gmail.com" <aaronngray@gmail.com> - 2020-11-12 15:32 -0800
  Re: Problems with Canvas fade in Arno Welzel <usenet@arnowelzel.de> - 2020-11-13 09:36 +0100
    Re: Problems with Canvas fade in "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-11-13 07:02 -0800
      Re: Problems with Canvas fade in Arno Welzel <usenet@arnowelzel.de> - 2020-11-14 16:28 +0100
        Re: Problems with Canvas fade in "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-11-14 08:30 -0800
          Re: Problems with Canvas fade in "aaron...@gmail.com" <aaronngray@gmail.com> - 2020-11-20 09:35 -0800
            Re: Problems with Canvas fade in "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-11-20 10:12 -0800

csiph-web