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>
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

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