Graphics

2D & 3D

Canvas 2D
<canvas id="canvas" width="800" height="600"></canvas>
<script>
  var canvas = document.querySelector('#canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect (10, 10, 55, 50);
  ...
</script>
Canvas 2D
Canvas 3D ( WebGL )
<canvas id="canvas" width="800" height="600"></canvas>
<script>
  var canvas = document.querySelector('#canvas');
  var gl = canvas.getContext('experimental-webgl');
  gl.viewport(0, 0, canvas.width, canvas.height);
  ...
</script>

File / Hardware Access

Deeper integration with hardware and the OS

Drag & Drop Files
var reader = new FileReader();
reader.onload = function(evt) {
  document.querySelector('img').src = evt.target.result;
};
 
function onDrop(evt) {
  reader.readAsDataURL(evt.dataTransfer.files[0]);
};
Drop image files from your desktop
FileSystem APIs
<input type="file" directory multiple />
Speech Input
<input type="text" speech />
Device Orientation
window.addEventListener("deviceorientation", function(event) {
  var a = event.alpha;  
  var b = event.beta;   
  var g = event.gamma;  
}
Having Fun in HTML5...

Thanks!