| hyatt@apple.com | afe6205 | 2008-09-03 18:13:39 +0000 | [diff] [blame] | 1 | <html> |
| 2 | <body> |
| 3 | <canvas id="canvas" width=600 height=300 style="border:5px solid black"> |
| 4 | <script> |
| rniwa@webkit.org | 38608af | 2012-06-19 07:23:13 +0000 | [diff] [blame] | 5 | if (window.testRunner) |
| 6 | testRunner.dumpAsText(true); |
| mdelaney@apple.com | 52b87e2 | 2011-03-31 00:00:59 +0000 | [diff] [blame] | 7 | |
| hyatt@apple.com | afe6205 | 2008-09-03 18:13:39 +0000 | [diff] [blame] | 8 | var ctx = document.getElementById('canvas').getContext('2d'); |
| 9 | |
| 10 | var x = 10; |
| 11 | var y = 150; |
| 12 | |
| 13 | ctx.lineWidth = 1; |
| 14 | ctx.beginPath(); |
| 15 | ctx.moveTo(0, 150); |
| 16 | ctx.lineTo(600, 150); |
| 17 | ctx.closePath(); |
| 18 | ctx.stroke(); |
| 19 | |
| 20 | ctx.font = "32px 'Times New Roman'"; |
| 21 | |
| 22 | var text = "Baseline"; |
| 23 | var w = ctx.measureText(text).width; |
| 24 | ctx.fillText(text, x, y); |
| 25 | x += w + 10; |
| 26 | |
| 27 | text = "Top"; |
| 28 | ctx.textBaseline = "top"; |
| 29 | w = ctx.measureText(text).width; |
| 30 | ctx.fillText(text, x, y); |
| 31 | x += w + 10; |
| 32 | |
| 33 | text = "Bottom"; |
| 34 | ctx.textBaseline = "bottom"; |
| 35 | w = ctx.measureText(text).width; |
| 36 | ctx.fillText(text, x, y); |
| 37 | x += w + 10; |
| 38 | |
| 39 | text = "Middle"; |
| 40 | ctx.textBaseline = "middle"; |
| 41 | w = ctx.measureText(text).width; |
| 42 | ctx.fillText(text, x, y); |
| 43 | x += w + 10; |
| 44 | |
| 45 | </script> |
