CODEWITHSUNDEEP
javascriptsignaturepad
user1130176
user1130176

Reputation: 1866

signature pad in modal not working (ink is offset from mouse)

I am trying to use signaturepad in a bootstrap modal, I have a canvas in a div:

<div class="modal-body">
    <div class='signature-container' >
        <canvas id="signature"></canvas>
        </canvas>
</div>

On init, I do (coffeescript):

canvas = $("canvas#signature")[0]
  signature_pad = new SignaturePad(canvas, backgroundColor: 'rgb(255, 255, 255)')

My css for the canvas is (because I want the canvas to fill the div)

width:100%; height:100%;

Everything works, but the "ink" is offset from the mouse pointer. When I first click, the initial ink appears to the right and below of the mouse pointer. The farther down I move the mouse, the farther the vertical offset, same with horizontal (i.e. the offset appears to scale linearly). I tried implementing the resize function in the demo but chrome evaluates offsetWidth to 0 and the canvas just shrinks to 0x0.

Anyone have any ideas what I'm doing wrong?

Upvotes: 10

Views: 4069

Answers (2)

Shane Dushyantha
Shane Dushyantha

Reputation: 102

Check @media screen zoom

/* Root */
html {
    @media screen and (min-width: 1441px) {
      zoom: 97%;
    }
    @media screen and (max-width: 1440px) {
      zoom: 95%;
    }
    @media screen and (max-width: 1540px) {
      zoom: 93%;
    }
    @media screen and (max-width: 1280px) {
      zoom: 91%;
    }
  }

Upvotes: 1

cmojones
cmojones

Reputation: 91

I was having this same exact problem, adding height and width of 100% to the canvas was causing the signature to appear offset horizontally to the right.

This is what was happening: Screenshot of signature issue

Found this elsewhere on stack - make canvas as wide and as high as parent ... the answer by Phrogz is key.

"3.The width and height attributes on a Canvas specify the number of pixels of data to draw to (like the actual pixels in an image), and are separate from the display size of the canvas."

He provided this bit of jQuery code to make canvas as wide and as high as its parent:

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

I also wanted to remove the line that appears across the sigpad when you clear it... and to do that I added these options to jquery:

signaturePad = $('.sigPad').signaturePad({
            drawOnly: true,
            bgColour: '#FFF',
            defaultAction: 'drawIt',
            penColour: '#2c3e50',
            lineWidth: 0,    
        });

The last line (lineWidth) controls the line across the sigpad.

Happy coding!

Upvotes: 9

Related Questions