random/canvas_rotated_textfill.html

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Rotated textFill</title>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="test" width="500" height="500"></canvas>
    <script type="text/javascript">
      var canvas = document.getElementById('test');
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
      ctx.fillRect(0, 0, 700, 470);
      
      ctx.fillStyle = "white";
      
      for (var i = 7; i < 13; i += 0.5) {
        var fontSpec = "" + i + "px monospace";
        ctx.font = fontSpec;
        ctx.fillText(fontSpec, 20, i * 35 - 220);
      }
      
      for (var i = 7; i < 13; i += 0.5) {
        var fontSpec = "" + i + "px sans-serif";
        ctx.font = fontSpec;
        ctx.fillText(fontSpec, 200, i * 35 - 220);
      }
      
      for (var i = 7; i < 13; i += 0.5) {
        var fontSpec = "" + i + "px serif";
        ctx.font = fontSpec;
        ctx.fillText(fontSpec, 370, i * 35 - 220);
      }
      
      for (var i = 7; i < 13; i += 0.5) {
        var fontSpec = "" + i + "pt monospace";
        ctx.font = fontSpec;
        ctx.fillText(fontSpec, 20, i * 35);
      }
      
      for (var i = 7; i < 13; i += 0.5) {
        var fontSpec = "" + i + "pt sans-serif";
        ctx.font = fontSpec;
        ctx.fillText(fontSpec, 200, i * 35);
      }
      
      for (var i = 7; i < 13; i += 0.5) {
        var fontSpec = "" + i + "pt serif";
        ctx.font = fontSpec;
        ctx.fillText(fontSpec, 370, i * 35);
      }
    </script>
  </body>
</html>