CODEWITHSUNDEEP
html5-canvashtml5-video
Frederico Schardong
Frederico Schardong

Reputation: 2115

Canvas with fade on top of <video>

I am using this code to create a fading trail. It uses context.fillStyle = 'rgba(0,0,0,0.12)'; to create the fade. The problem is that I want use the fading trail on top of a <video> element and the fade hides the <video> element.

Is there a way to have a canvas with fade on top of a <video> without hiding it?

Upvotes: 0

Views: 422

Answers (1)

user1693593
user1693593

Reputation:

You can draw the video element to the canvas instead using global alpha -

Update

To enable fade-out as well you can use this modified code (the demo uses a button to trigger fade-out but you can initiate it from anywhere setting fade = true):

ONLINE DEMO

var fade = false;
var fadeVal = 1;

ctx.globalAlpha = 0.2; //adjust as needed

function loop() {

    /// draw frame from video at current global alpha
    if (video1) ctx.drawImage(video1, 0, 0, w, h);

    /// if fade = true start fade out
    if (fade === true) {

        /// we need to make opaque again or the black box
        /// will be transparent resulting in none-working effect
        ctx.globalAlpha = 0.2 + (1-fadeVal);

        /// set fill color for black box
        ctx.fillStyle = 'rgba(0,0,0,' + (1 - fadeVal) + ')';

        /// draw on top of video 
        ctx.fillRect(0, 0, w, h);

        /// speed of fade out
        fadeVal -= 0.02;
    }

    /// when faded out, stop loop (stop video too, not shown)
    if (fadeVal >= 0) requestAnimationFrame(loop);

}
loop();

This will leave a video trail from the previous drawn frames and allow you to fade out the video keeping the trails.

This is just a bare-bone example and just one way of many to do this - adjust to your needs.

To restart video you set fade = false, fadeVal = 1 and invoke loop().

Upvotes: 2

Related Questions