<!-- canvas tag -->
<canvas id="doodle" width="500" height="500"></canvas>

<!-- javascript -->
<script type="text/javascript">

	//get a reference to the canvas
	var canvas = document.getElementById("doodle");
	
	//get the 2d context from the canvas
	var context = canvas.getContext("2d");

	//use the 2d context to draw something into the canvas
	context.fillRect(100, 100, 300, 300);
	
</script>

				

//listen for orientation events
window.addEventListener("deviceorientation", captureOrientation, false);	

//do something with the alpha, beta and gamma properties of the event
function captureOrientation(e) {

	//properties of the event
	alpha = e.alpha;
	beta = e.beta;
	gamma = e.gamma;

}

				

//instantiate a new Image object
var logo = new Image();

//define what happens when the image has finished loading
logo.onload = function() {

	//draw it on the canvas using our context (similar to fillRect())
	context.drawImage(logo, 320, 90, 100, 95);

}

//now we can load the Image into the image object by defining its src
logo.src = "images/chromium_logo.png";

				

<!-- speech input -->
<input type="text" speech="true" />

				

					
					
//listen for a 'drop' event on an HTML element
document.getElementById("drop-zone").addEventListener("drop", dropHandler);

//define our event handler
function dropHandler(e) {
	
	//grab data about the first file in the list
	file = e.dataTransfer.files[0];
	
	//create a new instance of FileReader
	var reader = new FileReader();

	//define our callback for when we attempt to load this file
	reader.onload = function(loadEvent) {

		//get the information we wanted
		fileURL = loadEvent.target.result;
		
		//do something useful with it
		
	}

	//now we're ready to read the file as URL
	reader.readAsDataURL(file);
  	
}

				

					
<!-- video -->
<video src="youtube_play.webm" controls="true" width="700" height="394"></video>