Make screenshot from a video with canvas overlay

Question

i've a html5 video with a pair of sibling canvas that make some effects over it. The structure is something like this:

 <div id="container_video">
     <video id="video1" width="450" height="340" preload="auto"></video>
     <canvas id="overlay" width="450" height="340"></canvas>
     <canvas id="webgl" width="450" height="340"></canvas>
 </div>

I wanna make a snapshot from the whole scene, the video with the overlays canvas. I only reach to capture the video, but not the whole scene.

What can i do?

Thanks.

Answer 1

 <video id="video1" width="450" height="340" preload="auto"></video>
 <canvas id="overlay" width="450" height="340"></canvas>
 <canvas id="webgl" width="450" height="340"></canvas>

 canvas = document.createElement("canvas");
 canvas.width = 450;
 canvas.height = 340;
 var ctx = canvas.getContext("2d");
 var vid = document.getElementById("video1");
 var over = document.getElementById("overlay");
 var gl = document.getElementById("webgl");
 ctx.drawImage(vid,0,0);
 ctx.drawImage(over,0,0);
 ctx.drawImage(gl,0,0);

 // canvas now contains the 3 elements as one image.

You will have to check the video has loaded and at the seek pos you want.

Answer 2

@Blindman67 it doesn't work

If i do this, i've the next error:

TypeError: canvas.getContext is not a function in 

var ctx = canvas.getContext("2d");

I try on the other way, like this:

var ctx_full = document.getElementById("canvas_full");
ctx = ctx_full.getContext("2d");

var vid = document.getElementById("video1");
var over = document.getElementById("overlay");
var gl = document.getElementById("webgl");

ctx.drawImage(vid,0,0);
ctx.drawImage(over,0,0);
ctx.drawImage(gl,0,0);

And then i've the error "TypeError:

Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap. in ctx.drawImage(vid,0,0);

Thanks