If I set the font to be fontsz (px), what does this mean? Will it be the maximum height of characters?

How to choose a height so that the black rectangle completely covers any text and that the inner borders of the text are minimal? If you manage to do this, then why will the borders be minimal?

 var can = $("canvas").get(0); var ctx = can.getContext('2d'); // x, y -- центр текста (???) var fontsz = 100, x = 200, y = 100, font = `${fontsz}px Arial`; ctx.font = font; var str = "qw]gHC}"; var w = ctx.measureText(str).width; var h = fontsz; // ??? ctx.fillRect(xw/2, yh/2, w, h); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "green"; ctx.fillText(str, x, y); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas width="500" height="200"></canvas>

    1 answer 1

    remove the Baseline, it will definitely help. Or mark the border from the top side.