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

Groups > comp.lang.javascript > #39139 > unrolled thread

Problems with Canvas fade in

Back to article view | Back to comp.lang.javascript

Contents

  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

#39139 — Problems with Canvas fade in

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.

Aaron

[toc] | [next] | [standalone]

#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

[toc] | [prev] | [next] | [standalone]

#39141

On Friday, November 13, 2020 at 2:36:17 AM UTC-6, Arno Welzel wrote:

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

ctx.clearRect(x, y, width, height); is more direct. I suspect faster as well.

The proof for this was at <https://jsperf.com/canvas-fill-vs-clear> but it looks like the website is down right now.

[toc] | [prev] | [next] | [standalone]

#39142

Michael Haufe (TNO):

> On Friday, November 13, 2020 at 2:36:17 AM UTC-6, Arno Welzel wrote:
> 
>> 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); 
> 
> ctx.clearRect(x, y, width, height); is more direct. I suspect faster as well.

Does clearRect() also use the current fill style?


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#39143

On Saturday, November 14, 2020 at 9:28:45 AM UTC-6, Arno Welzel wrote:

> Does clearRect() also use the current fill style?

clearRect() sets the area to rgba(0,0,0,0)

Given that the OP defined the context as:

ctx = canvas.getContext('2d', {alpha: false});

This will be visibly black instead of transparent.

<https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect>

[toc] | [prev] | [next] | [standalone]

#39165

On Saturday, 14 November 2020 at 16:30:24 UTC, Michael Haufe (TNO) wrote:
> On Saturday, November 14, 2020 at 9:28:45 AM UTC-6, Arno Welzel wrote: 
> 
> > Does clearRect() also use the current fill style?
> clearRect() sets the area to rgba(0,0,0,0) 
> 
> Given that the OP defined the context as: 
> 
> ctx = canvas.getContext('2d', {alpha: false}); 
> 
> This will be visibly black instead of transparent. 
> 
> <https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect>

Hi, Sorry I have not replied yet. I seem to have ended up with a worse solution now, and am getting aliasing, and remnants of previous draws despite using an all over fill as suggested.

I will whittle down what I am doing and do another jsfiddle post.

Thanks for the corrections and suggestions !

Aaron

[toc] | [prev] | [next] | [standalone]

#39166

On Friday, November 20, 2020 at 11:35:12 AM UTC-6, aaron...@gmail.com wrote:
> On Saturday, 14 November 2020 at 16:30:24 UTC, Michael Haufe (TNO) wrote: 
> > On Saturday, November 14, 2020 at 9:28:45 AM UTC-6, Arno Welzel wrote: 
> > 
> > > Does clearRect() also use the current fill style? 
> > clearRect() sets the area to rgba(0,0,0,0) 
> > 
> > Given that the OP defined the context as: 
> > 
> > ctx = canvas.getContext('2d', {alpha: false}); 
> > 
> > This will be visibly black instead of transparent. 
> > 
> > <https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect>
> Hi, Sorry I have not replied yet. I seem to have ended up with a worse solution now, and am getting aliasing, and remnants of previous draws despite using an all over fill as suggested. 
> 
> I will whittle down what I am doing and do another jsfiddle post. 
> 
> Thanks for the corrections and suggestions ! 

Since this is text is this something you need a canvas for? CSS will do this more directly:

```html
<h1 class="fader">This is a test</h1>
```

```css
.fader {
  animation: 2s linear 0s infinite alternate fader;
}

@keyframes fader {
  from { opacity: 1; }
  to { opacity: 0;  }
}
```

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web