canvas.2d.fontStretch.extra-expanded.html (761B)
1 <!DOCTYPE html> 2 <title>Canvas test: 2d.text.fontStretch</title> 3 <link rel="match" href="canvas.2d.fontStretch-ref.html"> 4 <canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas> 5 <script> 6 7 var canvas = document.getElementById("c"); 8 var ctx = canvas.getContext('2d'); 9 10 // P shows as Pass for fontStretch = extra-expanded and shows as fail for 11 // fontStretch = fail. 12 function draw() { 13 ctx.font = '25px test'; 14 ctx.fontStretch = "extra-expanded"; 15 ctx.fillText("P", 10, 40); 16 } 17 18 var f = new FontFace('test', 'url(/fonts/pass.woff)'); 19 f.stretch = "extra-expanded"; 20 document.fonts.add(f); 21 22 var f2 = new FontFace('test', 'url(/fonts/fail.woff)'); 23 document.fonts.add(f2); 24 25 Promise.all([f.load(), f2.load()]).then(draw); 26 27 </script>