フォームブリッジ 手書きサインを保存したい

kintoneの売上伝票アプリを、
kViewerのマイページを経由して、FormBridgeで編集できるようにしています。
そのFormBridge上で、受領の確認として、手書きでサインをして、
画像として保存できるよにしたいと思っています。

▼過去の投稿「【フォームブリッジ】手書き画像を添付ファイルへ保管」

この投稿と、javascriptの他のサンプルなどから、
jSignatureを利用して試してみました。

過去の投稿では、手書き機能の実装はできた とありますが、
同じようにコードを書いても、手書きスペースが表示されません。

まず、手書きスペースが表示されるようにするには、
どこを修正したらいでしょうか。
そもそもFormBridge上で、手書きサインをして、
添付ファイルに保存することはできますか?

よろしくお願いします。

フォームには
label というラベルフィールド
file という添付ファイルフィールド
他 売上情報
をフィールドとして配置しています。

↓作成したコード

(function() {
  "use strict";
  
  $(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"));
   });

  });
  
  fb.events.form.mounted = [function(state){
   fb.getElementByCode('label').innerHTML +=
   '<div id="canvas"></div>'+
   '<button id="clear">Clear</button>'+
   '<button id="download-image">Download</button>'+
   '<div id="image"></div>';
   return state;
  }];
  
  })();