javascript - 複数の署名パネルが機能している

Question

3 人の署名が必要なフォームがあります。最初は 1 人が署名するように設定しましたが、3 人必要であることがわかりました。3つすべてを機能させることはできません。

キャンバス コンテナ:

<div class="rowElem">
    <div id="container2">
    </div>
</div> 
<div class="rowElem">
    <div id="container3">
    </div>
</div>
<div class="rowElem">
    <div id="container4">
    </div>
</div> 

Javascript:

<script>


       (function (ns) {
    "use strict";

    ns.SignatureControl = function (options) {
        var containerId = options && options.canvasId || "container2",
            callback = options && options.callback || {},
            label = options && options.label || "Teacher Signature",
            cWidth = options && options.width || "300px",
            cHeight = options && options.height || "300px",
            btnClearId,
            canvas,
            ctx;

        function initCotnrol() {
            createControlElements();
            wireButtonEvents();
            canvas = _("signatureCanvas");
            canvas.addEventListener("mousedown", pointerDown, false);
            canvas.addEventListener("mouseup", pointerUp, false);
            ctx = canvas.getContext("2d");            
        }

        function createControlElements() {            
            var signatureArea = document.createElement("div"),
                labelDiv = document.createElement("div"),
                canvasDiv = document.createElement("div"),
                canvasElement = document.createElement("canvas"),
                buttonsContainer = document.createElement("div"),
                buttonClear = document.createElement("button");

            labelDiv.className = "signatureLabel";
            labelDiv.textContent = label;

            canvasElement.id = "signatureCanvas";
            canvasElement.clientWidth = cWidth;
            canvasElement.clientHeight = cHeight;
            canvasElement.style.border = "solid 2px black";
            canvasElement.style.background = "white";

            buttonClear.id = "btnClear";
            buttonClear.textContent = "Clear Signature Panel";

            canvasDiv.appendChild(canvasElement);
            buttonsContainer.appendChild(buttonClear);

            signatureArea.className = "signatureArea";
            signatureArea.appendChild(labelDiv);
            signatureArea.appendChild(canvasDiv);
            signatureArea.appendChild(buttonsContainer);

            _(containerId).appendChild(signatureArea);
        }

        function pointerDown(evt) {
            ctx.beginPath();
            ctx.moveTo(evt.offsetX, evt.offsetY);
            canvas.addEventListener("mousemove", paint, false);
        }

        function pointerUp(evt) {
            canvas.removeEventListener("mousemove", paint);
            paint(evt);
        }

        function paint(evt) {
            ctx.lineTo(evt.offsetX, evt.offsetY);
            ctx.stroke();
        }

        function wireButtonEvents() {
            var btnClear = _("btnClear");
            btnClear.addEventListener("click", function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }, false);
        }

        function getSignatureImage() {
            return ctx.getImageData(0, 0, canvas.width, canvas.height).data;
        }

        return {
            init: initCotnrol,
            getSignatureImage: getSignatureImage
        };
    }
})(this.ns = this.ns || {});

これはイニシエータ スクリプトです。

    function teacherSig() {
            var signature = new ns.SignatureControl({ containerId: 'container2', callback: function () {
                } 
            });
            signature.init();
            _('btnClear').className = "greyishBtn";
        }

        window.addEventListener('DOMContentLoaded', teacherSig, false);
</script>

「_」は、document.getElementById の別のファイルに設定された変数です。これが機能することは既にわかっています。すべての js ファイルで使用しています。

イニシエータ スクリプトを複製して、関数名/要素名を変更しようとしましたが、うまくいきませんでした。

どんな助けでも大歓迎です。

誰かがこれを行うためのより良い方法を知っているなら、私もそれを試すことができます. このプロジェクトの時間がなくなってきましたが、これは最終的にクライアントが追加したものでした. 誰かが別の解決策、プラグイン、または複数の何かを知っているなら、私もそれを受け入れます。