sketch.js paint program image processing issue

by Akram kamal

HTML

<script src="https://intridea.github.io/sketch.js/lib/sketch.js"></script>
<canvas id="SketchPad" width="800" height="300" style="background: url(http://farm1.static.flickr.com/91/239595759_3c3626b24a_b.jpg) no-repeat center center;"></canvas>

<input type=file accept="image/*" id="file-input">

JavaScript

$('#SketchPad').sketch();

$('#file-input').change(function(e) {
    var file = e.originalEvent.target.files[0],
        imageType = /image.*/;

    if (!file.type.match(imageType))
        return;

    var reader = new FileReader();
    reader.onload = fileOnload;
    reader.readAsDataURL(file);
});

function fileOnload(e) {
    console.log(e)

    var bgi = "url(" + e.target.result + ")"
    $("#SketchPad").css("background-image", bgi);
}