Estoy tratando de hacer referencia a un elemento DOM de lienzo para que su ancho sea el mismo que el de su padre sin alterar la escala del lienzo. Al hacerlo, obtengo un Uncaught TypeError: _canvasRef$current.getContext is not a function y no estoy exactamente seguro de cómo solucionarlo.
He registrado algunas cosas en la consola solo para hacer que la aplicación se ejecute, pero el problema está dentro del useEffect
import SignaturePad from 'react-signature-canvas' const canvasRef = useRef<HTMLCanvasElement>(null) useEffect(() => { const ctx: CanvasRenderingContext2D | null | undefined = canvasRef.current?.getContext('2d') const ctxContainer = document.getElementById('ctxContainer') console.log('ctx: ', ctx) // if (ctx && ctxContainer) { // ctx.style.width = '100%' // ctx.style.height = '100%' // ctx.width = ctxContainer.clientWidth // } }, []) const save = () => { console.log('saved!') } console.log('canvasRef: ', canvasRef) return ( <div id={`ctxContainer`} className={'signatureInput__option-draw'}> <SignaturePad ref={canvasRef} canvasProps={{ className: 'signatureInput__option-draw__canvas', }} onEnd={save} /> </div> )Prueba esto.
Tenga en cuenta que es posible que aún deba realizar algunos cambios en el siguiente código para cumplir con todos sus requisitos (como el manejo de eventos cuando el usuario cambia el tamaño de la pantalla). El siguiente código solucionará el problema que enfrenta en este momento.
useEffect(() => { if (canvasRef.current) { const canvas = canvasRef.current.getCanvas(); const ctx = canvas.getContext('2d'); // do something with the canvas ref if (ctx) { ctx.canvas.width = window.innerHeight; ctx.canvas.height = window.innerHeight; } } }, []);Intenta usar getCanvas() . no creo que getContext() se proporcione con el paquete
function App() { const canvasRef = React.createRef(null); useEffect(() => { const canvas = canvasRef.current; console.log(canvas.current); const ctx = canvas.getCanvas(); const ctxContainer = document.getElementById("ctxContainer"); console.log("ctx: ", ctx); if (ctx && ctxContainer) { ctx.style.width = "100%"; ctx.style.height = "100%"; ctx.width = ctxContainer.clientWidth; } }, []); const save = () => { console.log("saved!"); }; console.log("canvasRef: ", canvasRef); return ( <div className="App"> <div id={`ctxContainer`} className={"signatureInput__option-draw"}> <SignaturePad ref={(ref) => { canvasRef.current = ref; }} canvasProps={{ className: "signatureInput__option-draw__canvas", }} onEnd={save} /> </div> </div> ); }