Webcam snapshot to canvas

Question

I'm trying to create some little webcam tool that let's you take snapshots with an overlay. Now I've been working with the html5 canvas and got the webcam working. But whenever I try to save the webcam snapshot it just only loads either the webcam snapshot or the overlay and never both.

I've been trying out a couple things this is the closest I could get:

var teaser = new Image();
teaser.src = "http://www.fillmurray.com/g/1200/1200";
teaser.onload = function() {
context.drawImage(teaser, 0, 0);
};    
context.drawImage(v, teaser, 0 , 0, w, h); // this only draws the image

// and

context.drawImage(v, 0 , 0, w, h); // this just draws the webcam snapshot

Does anyone know if this is even possible or if I'm just being a complete idiot? So what I want to achieve is to draw two images in 1 canvas and to let the overlay to be on top of the video.

Here is a jsfiddle of what I have so far: http://jsfiddle.net/Px8g3/

Answer 1

You should do this :

context.globalCompositionOperation = "source-atop"

before drawing (or after the 1st draw, try both)

To be more precise :

var teaser = new Image();
teaser.src = "http://www.fillmurray.com/g/1200/1200";
teaser.onload = function() {
context.drawImage(teaser, 0, 0);
};
//context.save(); Try with and without
context.globalCompositionOperation = "source-atop";
context.drawImage(v, 0 , 0, w, h); // Don't know what v is, but i guess it's an image
//context.restore(); Same

To be precise, this make the canvas to be in "source-atop" mode. What does it means ? It means that where the top layer (the 2nd image you draw) is transparent, it will keep the background (video) and draw it. Elsewhere, it will draw your 2nd layer