text-horzline-with-bottom.html (625B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test to ensure bottom basline-anchored text doesn't intersect horz line</title> 5 </head> 6 <body> 7 <canvas id="c" width="128" height="64" style="direction:ltr"></canvas> 8 <script type="text/javascript"> 9 var canvas = document.getElementById('c'); 10 var ctx = canvas.getContext('2d'); 11 12 ctx.fillStyle = 'white'; 13 ctx.fillRect(0, 0, canvas.width, canvas.height) 14 15 ctx.strokeStyle = 'black'; 16 ctx.beginPath(); 17 ctx.moveTo(0,32); 18 ctx.lineTo(128,32); 19 ctx.stroke(); 20 21 ctx.font = '20px sans-serif'; 22 ctx.textBaseline = 'bottom'; 23 ctx.fillText('TEXT', 64, 32); 24 25 </script> 26 </body> 27 </html>