<!-- this script is provided by www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<canvas id="myCanvas" width="400" height="250"></canvas>
<video width="400" height="250" controls id="vid" style="display:none" autoplay onloadeddata="ply()">
	<source src="http://www.html5freecode.com/files/html5-video-element-sample.ogg" type="video/ogg">
	<source src="http://www.html5freecode.com/files/html5-video-element-sample.mp4" type="video/mp4">
</video>
<script>
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')
	var vid= document.getElementById('vid')
    var deg = Math.PI/180

   	ctx.font= "22pt serif"
    ctx.fillText('Loading...', 50, 110)	
	window.addEventListener('load', loaded, false)
	setInterval(loaded, 33)
	
function loaded(){	
	ctx.strokeStyle= "red"
	ctx.beginPath()
	ctx.moveTo(40, 20)
	ctx.lineTo(150, 20)
	ctx.quadraticCurveTo(180, 20, 180, 40)
	ctx.lineTo(180, 180)
	ctx.quadraticCurveTo(160, 180, 150, 200)
	ctx.lineTo(40, 200)
	ctx.quadraticCurveTo(30, 180, 10, 180)
	ctx.lineTo(10, 40)
	ctx.quadraticCurveTo(10, 20, 40, 20)
	ctx.closePath
    ctx.lineWidth= 4
    ctx.fillStyle= "lightgreen"
    ctx.strokeStyle= "darkgreen"
    ctx.stroke()
    ctx.save()
    ctx.clip()
	ctx.drawImage(vid, 10, 20, 170, 180)
    ctx.restore()

	ctx.beginPath()
	ctx.arc(95, 110, 30, 0*deg, 360*deg)
	ctx.moveTo(90, 80)
	ctx.lineTo(290, 30)		
	ctx.moveTo(90, 140)
	ctx.lineTo(290, 190)			
	ctx.moveTo(380, 110)	
	ctx.arc(300, 110, 80, 0*deg, 360*deg)
    ctx.lineWidth= 1	
    ctx.strokeStyle= "pink"   
    ctx.stroke()
    ctx.save()
    ctx.clip()
    ctx.drawImage(cnv, 67, 82, 56, 56, 220, 30, 160, 160)
    ctx.restore()
}

function playVid(){
	ctx.drawImage(vid, 10, 20, 170, 180)
	ctx.drawImage(cnv, 67, 82, 56, 56, 220, 30, 160, 160)
}

function ply(){
	var vid= document.getElementById('vid')
	vid.play()	
}
</script>
<div style="text-align: left"><font face="Tahoma"><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>