Why can't I load an image into canvas?

Question

JavaScript

Can't pass image to canvas. I don't understand what the problem is. Works one time.
Here is the code:

<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

Answer 1

Looked at CodePen everything works.