Re: Problems with Canvas fade in

Path	csiph.com!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From	Arno Welzel <usenet@arnowelzel.de>
Newsgroups	comp.lang.javascript
Subject	Re: Problems with Canvas fade in
Date	Fri, 13 Nov 2020 09:36:08 +0100
Lines	40
Message-ID	<i16urnFu046U1@mid.individual.net> (permalink)
References	<b59344c2-fe89-45c7-9d4f-0b8961f9e866n@googlegroups.com>
Mime-Version	1.0
Content-Type	text/plain; charset=utf-8
Content-Transfer-Encoding	7bit
X-Trace	individual.net xT49tTVVqJsYEPQkxwuLdwTLf8W4+aLYuBIuiwH7uewMVys+1C
Cancel-Lock	sha1:cn2jdMpZF7YEuHwrn1CiJ1sadQQ=
In-Reply-To	<b59344c2-fe89-45c7-9d4f-0b8961f9e866n@googlegroups.com>
Xref	csiph.com comp.lang.javascript:39140

Show key headers only | 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

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