Почему не передается изображение в canvas?

Не получается передать image в canvas. Не понимаю в чем проблема. Работает через раз. В Яндекс Браузере все работает хорошо, а вот в Хроме например нет. Вот код :

    <input id="upLoad" type="file">
    <img id="snap" src="" alt="" />
    <canvas id="canvas"></canvas>
var image = document.querySelector('img#snap'),
    canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');
$('#upLoad').on('change', function () {
   var file = this.files[0];
   console.log(file);
   var reader = new FileReader();
    reader.onload = function () {
        image.src = event.target.result;
       canvas.width = image.width;
       canvas.height = image.height;
       context.drawImage(image,0,0,canvas.width,canvas.height);
    };

    reader.readAsDataURL(file);
});

CodePen : https://codepen.io/anon/pen/ybXRBr