Signature_pad: ¿Cómo operar con 100% de ancho?

Sea más explícito ...

Sea más explícito ...

Había hecho el lienzo pensando en la computadora de mano, el ancho había sido perfecto.

Pero decidieron usar una tableta, por lo que el ancho se hizo más pequeño.

Ver la imagen:

Cómo hacer que la pantalla de la firma responda (Ancho 100%) a cualquier tamaño de pantalla.

Gracias.

(No puedo ver tu imagen)
¿ Funcionó el código de demostración en su tableta?

Tiene el mismo problema.
Configuré el ancho del lienzo al 100%, la altura al 100% en la pantalla del móvil
Entonces el lienzo no funciona correctamente

Hablar es barato. Muéstranos el código.

Utilice div wrap canvas . Luego use ResizeObserver listen div cambio de tamaño. pasar a canvas .

Es complejo pero funcionó. Yo uso useMeasure de react-use . Vea abajo:

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