Image upload into canvas

by Tobu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input id="upload" accept="image/*" type="file" />
<br>
<canvas id="canvas">

JavaScript

$('#upload').change(function () {

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    
    var img = new Image();
    
    img.onload = function () {
        canvas.width = this.width
        canvas.height = this.height
        ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
        URL.revokeObjectURL(src)
    }
    
    var file = this.files[0];
    var src = URL.createObjectURL(file);
    
    img.src = src;

});