text-horzline-with-top.html 619 B

12345678910111213141516171819202122232425262728
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Test to ensure top 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. ctx.fillStyle = 'white';
  12. ctx.fillRect(0, 0, canvas.width, canvas.height)
  13. ctx.strokeStyle = 'black';
  14. ctx.beginPath();
  15. ctx.moveTo(0,32);
  16. ctx.lineTo(128,32);
  17. ctx.stroke();
  18. ctx.font = '30px sans-serif';
  19. ctx.textBaseline = 'top';
  20. ctx.fillText('TEXT', 64, 32);
  21. </script>
  22. </body>
  23. </html>