Understanding a JS conditional statement to resize an element and trouble shooting it

Question

I have a section of code in a WP Plugin that is not working:

            //for compatibility with contact-form-7-signature-addon
 var cf7signature_resized = 0; 

        if (cf7signature_resized == 0 && typeof signatures !== 'undefined' && signatures.constructor === Array && signatures.length > 0 ) {
            if (signatures[0].canvas.width == 0) {
                for (var i = 0; i < signatures.length; i++) {

                    jQuery(".wpcf7-form-control-signature-body>canvas").eq(0).attr('width', jQuery(".wpcf7-form-control-signature-wrap").width());
                    jQuery(".wpcf7-form-control-signature-body>canvas").eq(0).attr('height', jQuery(".wpcf7-form-control-signature-wrap").height());

                    cf7signature_resized = 1;
                }
            }
        }

The html that it is supposed to be scouting for is something like this:

    <div class="wpcf7-form-control-signature-global-wrap" data-field-id="signature-386">
        <div class="wpcf7-form-control-signature-wrap" style="width:300px;height:200px;">
            <div class="wpcf7-form-control-signature-body">
                <canvas width="0" height="0" class="signature-386" id="wpcf7_signature-386_signature" style="touch-action: none;"></canvas>
            </div>
        </div>
    </div>

What I think this is saying is look through the page and find all elements that are not undefined and where cf7signature_resized is equal to 0 then put them in an array. For all those elements that have a canvas width property of 0, change the canvas width and height variables to be equal to the width and height properties of the signature wrapper. Then set the cf7signature_resized variable to 1. Am I reading this correctly?

If I am reading this correctly, this is what it should be doing but it is not. The resize is not taking place on the zero width. Essentially what it needs to do is find all the signature elements and resize them once. I do not see any errors in the console. What are some steps I can use to troubleshoot it?

What I do see is that the array in signatures is:

 [{"signature":{"velocityFilterWeight":0.7,"minWidth":0.5,"maxWidth":2.5,"penColor":"black","backgroundColor":"rgba(0,0,0,0)","_canvas":{},"_ctx":{},"points":[],"_lastVelocity":0,"_lastWidth":1.5,"_isEmpty":true,"_mouseButtonDown":false},"input":{"jQuery112408345313077967815":28},"canvas":{},"options":[]},{"signature":{"velocityFilterWeight":0.7,"minWidth":0.5,"maxWidth":2.5,"penColor":"black","backgroundColor":"rgba(0,0,0,0)","_canvas":{},"_ctx":{},"points":[],"_lastVelocity":0,"_lastWidth":1.5,"_isEmpty":true,"_mouseButtonDown":false},"input":{"jQuery112408345313077967815":28},"canvas":{},"options":[]}]

I am not sure that this is what is needed to complete the task.

When I extract the array another way I can see that it is pointing to the correct object:

 Object
 canvas: canvas#wpcf7_signature-386_signature.signature-386
 input: input#wpcf7_input_signature-386
 options: Array[0]
 signature: b
 __proto__: Object

This looks correct but I am not sure why it is not meeting the condition:

 if (signatures[0].canvas.width == 0)

Answer 1

将eq（0）更改为eq（i），然后循环执行了预期的操作。