【フォームブリッジ】手書き画面を表示し、添付ファイルへ保存する

kintone カスタマイズ
1

何を実現したいのかを書きましょう

1.ボタンを押すと手書きサインの画面が出力される
2.PCに手書きサインが保存される
3.添付ファイル欄に手書きサインを添付する

上記の流れを実現させようと考えております。
似たようなことを実現させようとしている方がいらっしゃいましたのでそちらを参考にコードを作成しました。

発生した問題やエラーメッセージを具体的に書きましょう

フォームブリッジのJavaScript/CSSでカスタマイズが従来と新で変更があり、公式サイトを参考に作成しましたが、手書きサインの画面が一瞬出力されるだけという結果となっております。
どこが間違っているのかご教授のほどよろしくお願いいたします。

実行したコードをコピー＆ペーストしましょう

(function() {
    "use strict";
    
    $(document).ready(function() {
     $("#canvas").jSignature({
      width: 600,
      height: 300,
      "background-color": "#ffffee",
     });
     $("#clear").click(function() {
      $("#canvas").jSignature("reset");
      $("img").remove();
     });
     $("#download-image").click(function() {
      var i = new Image();
      i.src = $("#canvas").jSignature("getData");
      $(i).appendTo($("#image"));
     });
    });

    form.show = [function(state){
     document.querySelector('.fb-custom--field[data-field-code="label"]').innerHTML +=
     '<div id="canvas"></div>'+
     '<button id="clear">Clear</button>'+
     '<button id="download-image">Download</button>'+
     '<div id="image"></div>';
     return state;
    }];
});