direction-rtl.html (940B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Canvas Test: the 'direction' property</title> 4 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"> 6 <link rel="match" href="reference/direction-rtl-ref.html"> 7 <meta name="assert" content="text rendering respects the direction property"> 8 <style> 9 canvas { 10 margin: 10px; 11 border: 1px solid gray; 12 } 13 </style> 14 15 <canvas id="c" width="300" height="300"></canvas> 16 17 <script> 18 let ctx = c.getContext("2d"); 19 ctx.direction = "rtl"; 20 ctx.font = "16px sans-serif"; 21 ctx.textAlign = "left"; 22 ctx.fillText("Hello World!", 150, 50); 23 ctx.textAlign = "right"; 24 ctx.fillText("Hello World!", 150, 100); 25 ctx.textAlign = "start"; 26 ctx.fillText("Hello World!", 150, 150); 27 ctx.textAlign = "end"; 28 ctx.fillText("Hello World!", 150, 200); 29 ctx.textAlign = "center"; 30 ctx.fillText("Hello World!", 150, 250); 31 </script>