Signature_pad: How to operate with 100% width?

Please be more explicit…

Please be more explicit…

I had made the canvas thinking of the handheld, the width had been perfect.

But they decided to use a tablet, so the width got smaller.

See the image:

How to make the signature screen responsive (Width 100%) to any screen size.

Thank you.

(I cannot see your image)
Did the demo code work on your tablet ?

Have the same issue.
I set the canvas width 100% height 100% in the mobile screen
Then the canvas don't work correct

Talk is cheap. Show us the code.

Use div wrap canvas. Then use ResizeObserver listen div size change. pass to canvas.

It's complex but worked. I use useMeasure of react-use. See below:

import React from 'react'
import { useMeasure } from 'react-use'

export default () => {
    const [containerRef, { width, height }] = useMeasure();

    return (
        <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
            <canvas width={width} height={height} />
        </div>
    )
}