Signature_pad: Como operar com 100% de largura?

Por favor seja mais explícito ...

Por favor seja mais explícito ...

Eu tinha feito a tela pensando no handheld, a largura estava perfeita.

Mas eles decidiram usar um tablet, então a largura ficou menor.

Veja a imagem:

Como fazer a tela de assinatura responsiva (largura 100%) a qualquer tamanho de tela.

Obrigada.

(Não consigo ver sua imagem)
O código de demonstração funcionou em seu tablet?

Tem o mesmo problema.
Defino a largura da tela 100% altura 100% na tela do celular
Então a tela não funciona corretamente

Falar é fácil. Mostre-nos o código.

Use div wrap canvas . Em seguida, use ResizeObserver listen div alteração de tamanho. passe para canvas .

É complexo, mas funcionou. Eu uso useMeasure de react-use . Veja abaixo:

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>
    )
}