| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>measureText directionality</title> |
| <meta charset="utf-8"> |
| <style> |
| canvas { background: green; } |
| </style> |
| </head> |
| <body> |
| <h1>measureText directionality</h1> |
| <canvas id="canvas" width="150" height="150"></canvas> |
| <p> |
| There should be a green box above with no red. |
| </p> |
| <script> |
| var text = '\u200D\u0628'; |
| var canvas = document.getElementById('canvas'); |
| var context = canvas.getContext('2d'); |
| context.font = '48pt Times New Roman'; |
| context.fillStyle= 'red'; |
| context.fillText(text, 50, 100); |
| var width = context.measureText(text).width + 4; |
| context.fillStyle = 'green'; |
| context.fillRect(50, 1, width, 148); |
| </script> |
| </body> |
| </html> |
