Canvas smooth fade to/from black (or any color)

[Italo]

This is an easy trick to achieve a smooth fade to black effect, (or any color you may want to use).

The secret (!?) is to use a line as thick as the canvas width that goes from the top to the bottom of it. That's right, it will cover it completely.

But we are going to change the alpha value of that line color. In my example I used a slider to allow the user to control the effect, but you can change it for a clock to make it automatic and as fast or slow as you want.

An idea that I had while doing this, is that we can change the canvas background image when the effect is 100% black and reverse the effect (fade "from" black). This will create a nice video-like transition between two different images.

If you want to try different colors, change the button's background colors ONLY. There's no need to change anything else in the blocks. 

While doing it in different colors, I realized that we can use this same effect for "tinting" images with a color.

An easy trick that offers a lot of possibilities. 

[Taifun]

very nice!

Taifun

[Enis]

Neat trick Italo!

[Scott Ferguson]

Cool :)

---

sf