Problems when rotating the signature div

[KrisToe4]

If I rotate the containing div using CSS to landscape (so that there is more room when viewed on a smartphone) the input isn't rotating to match. It seems like its retaining the original location/orientation for mouse input even though the actual canvas is drawing properly (sort of). Has anyone else run into this or have a solution?

[thomasjbradley]

How are you rotating? With transform?

[KrisToe4]

Yes with a CSS transform. I've included all the relevant code bits (hopefully).

html:

<div id="signature-popup">
    <div id="signature-div" class="sigPad">
        <label for="signature">Signature:</label>                                   
        <canvas id="signature" class="pad" width="400" height="100"></canvas>
        <input id="signature-output" type="hidden" name="output" class="output">
    </div>
</div>

JS:

$('.sigPad').signaturePad({
    drawOnly: true, 
    lineTop: 80,

});

var sigCanvas = $('#signature-display')[0];
var displayCtx = sigCanvas.getContext('2d');
displayCtx.scale(0.5, 0.5); 

CSS:

#signature-popup {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -moz-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

If there's a better way of doing what I want, I have no problem changing things. Thank you very much (both for the awesome plugin and for the help)!

[KrisToe4]

I just realized now that I am rotating the wrong canvas :(. I changed it to actually rotate the proper canvas and its still not working but at least that makes more sense now.

new JS:

$('.sigPad').signaturePad({
    drawOnly: true, 
    lineTop: 80,
});
if (window.matchMedia('(max-device-width: 1000px)').matches) {
    $('#signature')[0].getContext('2d').rotate(-90*Math.PI/180);
}

[KrisToe4]

Alright I think I have it figured out now. Once I rotated the div, I also had to translate it. Apologies if I took up any of your time unnecessarily.

[thomasjbradley]

No worries; I'm happy to hear you figured it out.