tick label overlap Y-axis


if the tick label is 'aaaaaaaaaaaaaaa', canvas' measureText() , calculated the 
str length is 60px, so in the label area, the pointer backforward 60px + 
padding value, so ideally, the string should never overlab the line. but, when 
'aaaaaaaaaaaaaaa' print on the screen, measure it, its actual length is 90px, 
so it overlap the line. and for another example, the string is 
'lllllllllllllll', measureText() got the width is 45px, but measure it on the 
screen, it only 30px, so that it will not overlap, but still not correct, for 
the right has a more gap, which is not our expect(expected is just the padding 
value)
|--|<--------------------------------------box.width----------------------------
--------->x|(Y-axis)
                                                                       |<---box.padding-->|
          |<-----measureText(username).width-------->|..........................|
          ^ (pointer move back to here)..............................................|
                                                                                                  |
                                                                                                  |______________________X-axis

draw text from box.width-box.padding-measureText(username).width
ideally, there will always a box.padding between Y-axis, but under chrome, it 
doesn't work as expected.

Original issue reported on code.google.com by qiulih...@gmail.com on 23 Aug 2012 at 6:49

Attachments:

Selection_001.png

StetHD / flot

tick label overlap Y-axis #743