En el proyecto tengo el siguiente Textarea:

 <textarea ref={textAreaRef} className='relative z-30 w-11/12 h-full font-sans text-xs bg-transparent outline-none resize-none ' />

y lienzo:

 <canvas id={'canvas'} ref={boardRef} })} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseMove={throttle(onMouseMove, 15)} onTouchStart={onMouseDown} onTouchEnd={onMouseUp} onMouseLeave={onPaletteLeave} onTouchCancel={onMouseUp} onTouchMove={throttle(onMouseMove, 15)} width={1600} height={900} style={isLayer ? canvasStyle : null} />

El área de texto puede contener texto con un tamaño de fuente específico en píxeles que cambia según la entrada del usuario.

El problema es que si comparamos el mismo texto con las mismas propiedades en el área de texto y en el lienzo, el texto impreso en el lienzo es claramente más pequeño que los que se encuentran en el área de texto.

Traté de usar la relación de dimensión de la página para tratar de escalar el texto resultante del lienzo, pero no dio buenos resultados:

 function ratioSize(size) { const canvasRatio = currentCanvas.current.clientWidth / currentCanvas.current.clientHeight; const pageRatio = window.screen.width / window.screen.height; return (pageRatio * size) / canvasRatio; } }