| <html> |
| <body> |
| <canvas id="canvas" width=600 height=300 style="border:5px solid black"> |
| <script> |
| var ctx = document.getElementById('canvas').getContext('2d'); |
| |
| var x = 10; |
| var y = 150; |
| |
| ctx.lineWidth = 1; |
| ctx.beginPath(); |
| ctx.moveTo(0, 150); |
| ctx.lineTo(600, 150); |
| ctx.closePath(); |
| ctx.stroke(); |
| |
| ctx.font = "32px 'Times New Roman'"; |
| |
| var text = "Baseline"; |
| var w = ctx.measureText(text).width; |
| ctx.fillText(text, x, y); |
| x += w + 10; |
| |
| text = "Top"; |
| ctx.textBaseline = "top"; |
| w = ctx.measureText(text).width; |
| ctx.fillText(text, x, y); |
| x += w + 10; |
| |
| text = "Bottom"; |
| ctx.textBaseline = "bottom"; |
| w = ctx.measureText(text).width; |
| ctx.fillText(text, x, y); |
| x += w + 10; |
| |
| text = "Middle"; |
| ctx.textBaseline = "middle"; |
| w = ctx.measureText(text).width; |
| ctx.fillText(text, x, y); |
| x += w + 10; |
| |
| </script> |
