Fabric.js experiment

Updated based on @kangax's gist https://gist.github.com/1095042 and it works like a charm

by swesh

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script>
<input type="file" id="imgLoader">
    
    <canvas id="c" width="300" height="300"></canvas>

JavaScript

canvas = new fabric.Canvas('c');
var image;
document.getElementById('imgLoader').onchange = function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) { console.log('fdsf');
        var imgObj = new Image();
        imgObj.src = event.target.result;
        imgObj.onload = function () {
            // start fabricJS stuff
            if(image != undefined) 
            {
                image.setElement(imgObj)
                console.log(image);
            }
            else {
            image = new fabric.Image(imgObj);
            image.set({
                left: 250,
                top: 250,
                angle: 20,
                padding: 10,
                cornersize: 10
            });
            }
            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
            canvas.add(image);
            
            // end fabricJS stuff
        }
        
    }
    reader.readAsDataURL(e.target.files[0]);
}