在<canvas> HTML5 <video> </video> </canvas>上创建线性渐变叠加

Question

背景

我有一段时间流逝的云downloadable here的循环视频。我想在云端实时添加渐变。

我会将实时链接放到代码中，但由于安全性，视频无法通过画布进行流式播放。所以如果你想要一个样本（或你自己的）

，请下载视频

最终结果（我在Photoshop中制作）：

最后，我将在运行时生成此渐变的颜色。

问题

如何在我的canvas上创建一个线性渐变，这会改变视频？

码

HTML：

<canvas id="c"></canvas>
<video autoplay  loop id="v">
    <source src='images/cloud.mp4'  type='video/mp4' />
</video>

的CSS：

#c {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

的javascript：

document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');
    var back = document.createElement('canvas');
    var backcontext = back.getContext('2d');

    var cw,ch;

    v.addEventListener('play', function(){
        cw = v.clientWidth;
        ch = v.clientHeight;
        canvas.width = cw;
        canvas.height = ch;
        back.width = cw;
        back.height = ch;
        draw(v,context,backcontext,cw,ch);
    },false);

},false);

function draw(v,c,bc,w,h) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,w,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,w,h);
    var data = idata.data;

    // Currently this loops through the pixels, turning them grayscale as a proof of concept.  I believe this is where the gradient + blending modes would go.
    for(var i = 0; i < data.length; i+=4) {
        var r = data[i];
        var g = data[i+1];
        var b = data[i+2];
        var brightness = (3*r+4*g+b)>>>3;
        data[i] = brightness;
        data[i+1] = brightness;
        data[i+2] = brightness;
    }
    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(function(){ draw(v,c,bc,w,h); }, 0);
}

注释

1. hsla中的颜色更容易，我想在运行时更改Hue。

颜色：

----HSLA(268,92%,19%,.5);

----HSLA(30,100%,50%,.5);

1. 渐变的混合模式为Overlay。