How can I ensure that the labels in both canvas and HTML display overlap exactly, regardless of font family and size? The current code fails to center text inside an area when switching between canvas and HTML view.
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.translate(canvas.width/2, canvas.height/2);
ctx.font = '64px Tahoma';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'BlueViolet';
ctx.fillText('Hello World!', 0, 0);<canvas
height="160"
id="canvas"
style="
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
"
width="480"
></canvas>
<div
style="
align-items: center;
color: FireBrick;
display: flex;
font-family: Tahoma;
font-size: 64px;
height: 160px;
justify-content: center;
left: 0;
line-height: 1;
opacity: 0.5;
position: absolute;
top: 0;
width: 480px;
"
>Hello World!</div>