如何在html画布中的文本周围绘制矩形？

Question

I know I read a couple of stuff about ascent and font height in canvas but I simply don't get it.

First of all why is the text drawn from right to top instead of the form right to bottom like with rectangles. I can't find that anywhere in the doc. And then what do I do if I want to draw a rectangle around a letter, especially 'y' or 'p' the ones that go below the baseline.

I have a canvas with text ,

 ctx.beginPath();
  ctx.fillText('Hello yyyqqqppp', 50, 50);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.closePath();

what do I do to get the rectangle drawn around it?

Thanks in advance!

Answer 1

Here are some keys to drawing a rectangle around text

If you want the text to be aligned from the top-left then you can set these context alignment properties:

context.textAlign='left';  // this is the default to align horizontally to the left
context.textBaseline='top';  // text will be aligned vertically to the top

You can measure the horizontal width of text using this context method:

// set the font size and font face before measuring
context.font='14px verdana';
var textWidth=context.measureText('Hello').width;

There is no native canvas way to measure text height, but for most fonts and non-extreme font sizes I've worked with you can get a good approximation of the height like this:

var lineHeight=fontsizeInPixels * 1.286;

Example code and a Demo:

 // get references to canvas and context var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var fontsize = 14; var fontface = 'verdana'; var lineHeight = fontsize * 1.286; var text = 'Draw a rectangle around me.'; ctx.font = fontsize + 'px ' + fontface; var textWidth = ctx.measureText(text).width; ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.fillText(text, 20, 50); ctx.strokeRect(20, 50, textWidth, lineHeight); 

 canvas { border: 1px solid red; } 

 <canvas id=canvas width=300 height=300></canvas> 

Answer 2

First, a few misconceptions :

• ctx.closePath() method does close a Path2D that is still open : ie ctx.moveTo(10,10); ctx.lineTo(50, 50); ctx.lineTo(30, 50); ctx.moveTo(10,10); ctx.lineTo(50, 50); ctx.lineTo(30, 50); will leave an unclosed path. Calling closePath() will create the last ctx.lineTo(10,10) for you.
  ctx.rect() is therefore always a closed path, no need to call this method.
  ctx.fill() will close the path for you.
  ctx.fillText() doesn't produce a path and already includes the fill() method, no need to call it again.

Now, why is the baseline specified instead of the top of the text, it is because by default the ctx.textBaseline property is set to "bottom" . You can set it to "top" if you need.

There is currently no way to get the height of a text in canvas but you can use some tricks or as noted by markE , an approximation of 1.286*fontSize in px.

To get the position of a letter in your text, you can use the ctx.measureText() method.

So for your example you can end with :

 var ctx = canvas.getContext('2d'); // the font size at which we will draw text var fontSize= 15; // set it ctx.font = fontSize+'px Arial'; // the text position var x = 50, y=50; // the string to draw var str = "Hello yyyqqqppp "; ctx.strokeStyle="red"; // get every characters positions var chars = []; for(var i=0; i<str.length;i++) { if (str[i] === "y" || str[i] === "p") chars.push(i); } //iterate through the characters list for(var i=0; i<chars.length; i++){ // get the x position of this character var xPos = x+ctx.measureText(str.substring(0,chars[i])).width; // get the width of this character var width = ctx.measureText(str.substring(chars[i],chars[i]+1)).width; // get its height through the 1.286 approximation var height = fontSize*1.286; // get the y position var yPos = y-height/1.5 // draw the rect ctx.strokeRect(xPos, yPos, width, height); } // draw our text ctx.fillText(str, x, y); 

 <canvas id="canvas"></canvas>