HTML5: load an image into a canvas with JS and a file input

<html lang="en">

<header></header></header>

<body>

<canvas id="can" width="100" height="100"></canvas>

<form>
    <input type="file" id="f" />
</form>

<script type="text/javascript">

// canvas
var canvas = document.getElementById('can');
var context = canvas.getContext("2d");

/*
// standard method
var img = new Image();
img.src= "algernon.jpg";

img.onload = function() {
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    // update drawing
    context.drawImage(
        img, // source
        0,0, // position
        100, 100 // size
    );
}*/

var fileinput = document.getElementById('f');

fileinput.onchange = function(evt) {
    var files = evt.target.files; // FileList object
    var file = files[0];
    if(file.type.match('image.*')) {
        var reader = new FileReader();
        // Read in the image file as a data URL.
        reader.readAsDataURL(file);
        alert(reader.readyState);
    } else {
        alert("not an image");
    }
};

</script>

</body>
</html>