HTML5 Canvas Example

by farhatdz

HTML

<form><input type="file" id="fileUpload"></form>
<canvas id="canvas" width="400" height="400"></canvas>

CSS

canvas { border: 1px solid black; }

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var fileUpload = document.getElementById('fileUpload');

fileUpload.onchange = function fileUploadChanged() {
    loadFile(ctx, this.files);
}

function loadFile(canvasCtx, files) {
    if (files && files[0]) {
        var reader = new FileReader();
        reader.onload = function() {
            drawImage(canvasCtx, reader.result);
        };
        reader.readAsDataURL(files[0]);
    }
}

function drawImage(canvasCtx, imageSrc) {
    var img = new Image();
    img.onload = function() {
        canvasCtx.drawImage(img, 0, 0, 512, 512);
    };
    img.src = imageSrc;
}