使用clearRect（）覆盖画布上的文本输出？

Question

I'm making a little game on jsbin and everything so far is going well but I'm have a slight problem. The goal of the game is to click the randomly appearing circle as many times as possible in one minute. I want it to output the time left and the score in the corners, and I have done so. The problem is that they are overwriting each other. This is because to prevent flickering I decided not to use

c.clearRect(0,0,canvas.width,canvas.height);

instead drawing a clearRect just over the circle when its clicked. I want to do a similar thing with text. I used this line:

c.clearRect(0,fontSize,c.measureText(timeLeft),fontSize);

this should work but it has no effect. I've tried everything, but I don't know what's wrong with this line. My only other theroy is that is in the wrong spot in the code, but I haven't found a problem with that.

Here is the link to the current version I'm working on: http://jsbin.com/touchgame/10/edit

Thanks!

Answer 1

measureText() returns an object with a width property, so you need to use c.measureText(timeLeft).width.

Also, you decreased the timeLeft and then called clearRect, which will clear a rectangle based on the new width for timeLeft. You want to clear based on the width for the "old" timeLeft value and then decrease the timeLeft:

if (timeLeft < 1){
  c.clearRect(0,fontSize,c.measureText(timeLeft).width + 5,fontSize*1.5);

  timeLeft--;
  //clear over time output

  console.log(c.measureText(timeLeft));
}

This should work. Because the way drawing text works, it's not trivial to know exactly the bounding box of the text, so that's why we clear a larger area than fontSize. You could use c.textBaseline = 'top', which would place the text with the top coordinate at the y you specify instead of the baseline of the text at y.

Finally, I think it's an easier approach to clear the canvas completely and redraw everything when you want to update the graphics. If you clear the canvas and then immediately redraw evrything you won't get any flickering. The performance hit of redrawing everything is usually neglible in most cases, and it makes things a lot simpler.