Signature_pad: Comment opérer avec 100% de largeur ?

Merci d'être plus explicite...

Merci d'être plus explicite...

J'avais fait la toile en pensant à l'ordinateur de poche, la largeur avait été parfaite.

Mais ils ont décidé d'utiliser une tablette, donc la largeur est devenue plus petite.

Voir l'image :

Comment rendre l'écran de signature réactif (largeur 100%) à n'importe quelle taille d'écran.

Merci.

(je ne vois pas ton image)
Le code de démonstration a- t-il fonctionné sur votre tablette ?

Avoir le même problème.
J'ai défini la largeur de la toile 100% hauteur 100% dans l'écran mobile
Ensuite, la toile ne fonctionne pas correctement

Parler n'est pas cher. Montre-nous le code.

Utilisez div wrap canvas . Ensuite, utilisez ResizeObserver écoutez le changement de taille div . passer à canvas .

C'est complexe mais a fonctionné. J'utilise useMeasure de react-use . Voir ci-dessous:

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