Canvas breaking in step-through progress form

Hi
Thanks for using the plugin.
Looks like this is the same issue as this one. The width and height of the canvas is set to 0. That’s weird :S
The problem is i don’t have much extra time to dig into this at the moment. I’ll do my best to help on those cases but it may takes some time …

Weird, right? Thanks for your response! If I find a solution I will come back and post it ??

Maybe you already did, but i’d try to force the width and height of the canvas just before the 2nd step is about to load.
Keep me in touch.

Trying that. Which second step? Are you talking about this:

// Dealing with window size and device ratio
function sigFieldResize(index, clear){

	var canvas = signatures[index].canvas;

	var ratio =  Math.floor(window.devicePixelRatio || 1, 1);
     canvas.width = canvas.offsetWidth * ratio;
     canvas.height = canvas.offsetHeight * ratio;
	//canvas.width = 400;
    //canvas.height = 100;
    canvas.getContext("2d").scale(ratio, ratio);

    if (clear){
    	sigFieldClear(index);
    }
}

No i’m talking about the second step of your step through form, when the signature field is about to be displayed.
Maybe try to call my plugin’s sigFieldsResize() function again (or simply set a hard coded width and height first) when this tab is shown.

Quick note – when I use window.onresize = sigFieldsResize; and I resize the browser, it works.

Hard coded width and height does not work ??

I’m not sure why this works but I found some info here and threw it in and it seems to work, somehow?:

var bufferCanvas = signatures[index].canvas;

var ratio = Math.max(window.devicePixelRatio || 1, 1);
bufferCanvas.width = canvas.width = window.innerWidth;
bufferCanvas.height = canvas.height = window.innerHeight;
canvas.getContext(“2d”).scale(ratio, ratio);

Hope this helps or at least leads someone to a fix!

After using window.onresize = sigFieldsResize;, the field size is resized, however, writing on it is not working.