前提
アップロードか画像URLから画像を読み込み、表示し、画像にお絵描きができるツールを作っています。

動作サンプル

表示された画像をクリックするとパスを打つことができ、パスを3点以上打ってから1点目を打つとパスが閉じます。
パスを閉じた後の次のクリックは、リセットされ1点目になります。

問題点
リセットボタンを押すと画像が消えフォームの中身もクリアされますが、パスがクリアされません。
パスを打った後にリセットボタンを押し再度画像を読み込むと、リセット前に打ったパスが復活します。
なので、リセットボタンによってパスもクリアできるようにしたいです。

使用ライブラリ
・jQuery
・Paper.js

ソースコード

$(function () {
  
  //リセットボタン
  $('#close').click(function () {
    $('#view').fadeOut();
    $('#url')[0].value = '';
    $('#file')[0].value = '';
    $('#pen').value = '';
  });
  
  $('#url').change(function () {
    $('#view').fadeOut(1);
    $('#file')[0].value = '';
    $('#view').fadeIn();
    input(this.value);
  });
  $('#file').change(function () {
    $('#view').fadeOut(1);
    $('#url')[0].value = '';
    $('#view').fadeIn();
    var fr = new FileReader();
    fr.onload = function (e) {
      input(e.target.result);
    };
    fr.readAsDataURL(this.files[0]);
  });
  function input(e) {
    var img = new Image();
    img.onload = draw;
    img.src = e;
  }
  function draw(e) {
    var img = e.target;
    var imgcnv = $('#img');
    var imgH = 800;
    var imgW = img.naturalWidth * imgH / img.naturalHeight;
    imgcnv.attr('width', imgW);
    imgcnv.attr('height', imgH);
    var ctx = imgcnv[0].getContext('2d');
    ctx.drawImage(img, 0, 0, imgW, imgH);
    $('#img').width('100%');
    $('#img').height('100%');
    var penW = $('#img').width();
    var penH = $('#img').height();
    var pencnv = $('#pen');
    pencnv.attr('width', penW);
    pencnv.attr('height', penH);
    }
  });
#view {
  display: none;
}
#draw {
  position: relative;
}
#img {
  border: 3px solid black;
}
#pen {
  position: absolute;
  cursor: crosshair;
  top: 0;
  left: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.js"></script>
</head>
<body>
  <input id="url" type="text" placeholder="画像URLを貼付">
  <input id="file" type="file" accept="image/*">
  <div id="view">
    <div id="draw">
      <canvas id="img"></canvas>
      <script type="text/paperscript" canvas="pen">
        var hitOptions = Object.seal({
          segments: true,
          stroke: false,
          fill: false,
          tolerance: 10
        });
        var path = null;
        function onMouseDown(e) {
          var hitSeg = project.hitTest(e.point.clone(), hitOptions);
          var isClose = path != null
              && path.segments.length > 2
              && hitSeg
              && hitSeg.type === 'segment'
              && hitSeg.item.firstSegment === hitSeg.segment;
          if (isClose) {
            path.closed = true;
            path = null;
            return false;
          }
          if (path == null) {
            path = new Path();
            path.selected = true;
            path.add(e.point);
          }
          else {
            path.add(e.point);
          }
        } 
      </script>
      <canvas id="pen" width="720" height="600"></canvas>
    </div>
    <button id="close">リセット</button>
  </div>
</body>
</html>

試したこと
paper.js及びpaperscriptの有無でパスを打てる機能のオンオフが切り替えられると考え、

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.js"></script>

<script type="text/paperscript" canvas="pen">

画像を読み込んだタイミング上記2つのタグをで生成し、リセットボタンで上記2つのタグを消す、という処理をしてみました。
しかし、生成したタグではpaperscriptが機能せず、パスが打てませんでした。