In the project i have the following Textarea:

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

and canvas:

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

The textarea can contain text with a specific font size in pixels that changes based on user input.

The problem is that if we compare the same text with the same properties in the text area and canvas, the text imprinted in the canvas is clearly smaller than those found in the textarea.

I tried to use the page dimension ratio to try to scale up the resulting text of the canvas, but it did not give good results:

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