Escribí esta aplicación webRTC que toma fotos con diferentes filtros agregados. Cuando hago clic en el botón de clic, el marco del video webRTC se carga en el lienzo en el lado derecho.

código HTML -

<video id="vid" autoplay="true"></video>
<canvas id="cvs"></canvas>
<button id="btn1" onclick="start()">Start</button>
<button id="btn2" onclick="change()">Change Filter</button>
<button id="btn3" onclick="snap()" ng-click="random()">Click</button>

La función que he escrito para ajustar la imagen en el lienzo después de agregar el filtro es la siguiente

function snap() 
    {
    canvas.className = '';
    if (findex != 0)
    canvas.classList.add(filters[findex]);
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    }

¿Cómo puedo permitir que el usuario descargue la imagen en la computadora desde el lienzo con los filtros después de hacer clic en la foto?