Hi guys, I am new to Javascript and I would like to have some help. Right now I am busy creating a Photobooth using the webcam, I have found an article how to make one:

I want to add something extra to it, I want to use the Javascript feature "draggable" to drag a image (glasses) over the canvas and take a picture. When the picture is made the image file would be on the picture. Right now I can take pictures with the cam and I can drag an image over the canvas. But when I take a picture the image isn't on the picture. Is it possible to fix this. Many thanks.

The current code I have is this:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<video id="live" autoplay></video>
<div id="draggable" class="ui-widget-content">
<p><img src="images/h.png" width="347" height="347" id="draggable"></p>

<canvas id="foto" style="display:none"></canvas>
<p><a href="#" onClick="takepicture()">Take picture</a></p>

<div id="filmroll"></div>

<script type="text/javascript">
video = document.getElementById("live")
{video: true, audio: true},
function(stream) {
video.src = window.webkitURL.createObjectURL(stream)
function(err) {
console.log("Unable to get video stream!")

function takepicture() {
live = document.getElementById("live")
photo = document.getElementById("photo")
filmroll = document.getElementById("filmroll")

photo.width = live.clientWidth
photo.height = live.clientHeight

var photo = document.getElementById("canvas");
var ctx = foto.getContext("2d");

var img;
function eventWindowLoaded(){
img = new Image();
img.src = "images/h.png";
img.onload = function(){

img = document.createElement("img")
img.src = foto.toDataURL("image/png")
img.style.padding = 5
img.width = foto.width / 2
img.height = foto.height / 2


$(function() {
$( "#draggable" ).draggable();

<div style="position: absolute; top:50px; left:50px;">
<canvas id="canvas" width="320" height="250" >Does not Support Canvas</canvas>