画像URL入力または画像ファイルをアップロード→読み込んだ画像をcanvasに送る→描画を開始させたい

画像URL入力または画像ファイルをアップロード→読み込んだ画像をcanvasに送る→描画開始
というコードを作りたいです。
現状、画像URLまたはローカルの画像ファイルをアップロードする形で、canvasに画像を描画することはできていますが、

$(function () {
//input url
$('#url').change(function () {
    var url = $('#url').val();
    var img = new Image();
    img.onload = function () {
        $('#canvas').fadeOut(1);
        var file = $('#file')[0];
        file.value = "";
        $('#canvas').fadeIn(1);
        var cnvsH = 250;
        var cnvsW = img.naturalWidth * cnvsH / img.naturalHeight;
        var canvas = document.querySelector('#canvas');
        canvas.setAttribute('width', cnvsW);
        canvas.setAttribute('height', cnvsH);
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, cnvsW, cnvsH);
    }
    img.src = url;
});
//input file
$('#file').change(function () {
    var file = this.files[0];
    var img = new Image();
    var fr = new FileReader();
    fr.onload = function (e) {
        img.onload = function () {
            $('#canvas').fadeOut(1);
            var url = $('#url')[0];
            url.value = "";
            $('#canvas').fadeIn(1);
            var cnvsH = 250;
            var cnvsW = img.naturalWidth * cnvsH / img.naturalHeight;
            var canvas = $('#canvas');
            canvas.attr('width', cnvsW);
            canvas.attr('height', cnvsH);
            var ctx = canvas[0].getContext('2d');
            ctx.drawImage(img, 0, 0, cnvsW, cnvsH);
        }
        img.src = e.target.result;
    }
    fr.readAsDataURL(file);
  });
});

画像URL入力→描画開始または画像ファイルをアップロード→描画開始
になっています。
なのでinputには画像を読み込むコードのみにし、描画するコードはcanvasのイベントとして一つにまとめたいです。
どなたか教えていただけないでしょうか。

私が初心者のため理解しにくい説明になっているかと思い、図とコード（もちろん機能しないです）で現状とやりたいことをまとめましたので、よろしければご確認ください。

$(function () {
  //input url
  $('#url').change(function () {
    var file = $('#file')[0];
    file.value = "";
    var url = $('#url').val();
    var img = new Image();
    img.onload = function () {
      //canvasに送りたい
      img = $('#canvas');
    }
  });
  //input file
  $('#file').change(function () {
    var url = $('#url')[0];
    url.value = "";
    var file = this.files[0];
    var img = new Image();
    var fr = new FileReader();
    fr.onload = function (e) {
      img.onload = function () {
        //canvasに送りたい
        img = $('#canvas');
      }
    }
  });
  //canvasに画像が来たら発火
  $('#canvas').change(function(){
    var cnvsH = 500;
    var cnvsW = img.naturalWidth * cnvsH / img.naturalHeight;
    var canvas = document.querySelector('#canvas');
    canvas.setAttribute('width', cnvsW);
    canvas.setAttribute('height', cnvsH);
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, cnvsW, cnvsH);
  });
  //エンコード？
});

canvasに描画した後に加工→保存する機能を実装する予定です。