Canvas Clears when scrolling on iPad

[stevedurr]

Hi

When I scroll a page on the iPad the drawn signature clears, the data stays but the drawing is removed.

If you then redraw it overlays it on to the first drawing.

Any ideas what I need to do to prevent it?

Steve

[katalin2003]

Hello.
The canvas clears itself when its dimensions or device orientation changes.
Check that first.

On Tuesday, June 9, 2015, stevedurr notifications@github.com wrote:

Hi

When I scroll a page on the iPad the drawn signature clears, the data
stays but the drawing is removed.

If you then redraw it overlays it on to the first drawing.

Any ideas what I need to do to prevent it?

Steve

—
Reply to this email directly or view it on GitHub
#156.

[stevedurr]

Yes I saw that or something similar on another issue.

The page has lots of content so when you scroll down on the iPad it clears the drawing (not the data).

[thomasjbradley]

That's really weird. The <canvas> element isn't being resized when the browser scrolls?

[stevedurr]

It is really weird. I'm going to do some investigating but I can't get the iPad to connect to Safari to inspect what is going on.

I'll let you know if I find out whats happening

[stevedurr]

I've found the error of my ways on this one. I'm using some javascript to make the canvas element responsive which resized the canvas, see below. I've highlighted the 3 lines added to fix my issue.

`//Get the canvas & context
var c = $('#respondCanvas');
var ct = c.get(0).getContext('2d');
var container = $(c).parent();

//Run function when browser resize
$(window).resize( respondCanvas );

function respondCanvas(){
c.attr('width', $(container).width() ); //max width
c.attr('height', $(container).height() ); //max height
var api = $('.sigPad').signaturePad();
var sig = api.getSignature();
api.regenerate(sig);
}
respondCanvas();`

$(document).ready(function() {
$('.sigPad').signaturePad({
lineWidth: 0,
drawOnly:true,
errorClass: 'bg-danger',
errorMessageDraw: 'Please sign the form'
});
});

[thomasjbradley]

Okay; so you’ve got it working the way you want?

[stevedurr]

Yeah its all good. Nothing to do with your code, as I think we all probably expected...

Thanks

[thomasjbradley]

Glad to hear it!