Choose a picture from your device or capture one with your camera now:


body, html {font-family:sans-serif; background-color:#000000;}
div {width:80%; margin:auto; background-color:#ffffff; padding:5%; border:2px solid #990066; text-align:center; border-radius:10px;}
canvas {padding:5%; border:2px solid #330000; background-color:#660000; border-radius:10px;}
function picChange(evt){
//bring selected photo in
//get files captured through input
var fileInput =;
//get the file
//window url
var windowURL = window.URL || window.webkitURL;
//picture url
var picURL = windowURL.createObjectURL(fileInput[0]);
//get canvas
var photoCanvas = document.getElementById(“capturedPhoto”);
var ctx = photoCanvas.getContext(“2d”);
photo.onload = function(){
//draw photo into canvas when ready
ctx.drawImage(photo, 0, 0, 500, 400);
//load photo into canvas
photo.src = picURL;
//release object url