font property

Article
05/02/2017

Gets or sets the current font for the context.

This property is read/write.

Syntax

HRESULT put_font(
  [in]          
            string
           v
);

HRESULT get_font(
  [out, retval] 
            string
           *fontDescription
);

Property values

Type: string

The current font description.

Standards information

HTML Canvas 2D Context, Section 11

Remarks

The font string can consist of any CSS font and is analogous to the CSS font property. The default font for a canvas context is 10px sans-serif. Values that are not CSS font values are ignored.

Examples

The following example uses ICanvasRenderingContext2D::font, along with ICanvasRenderingContext2D::strokeText and ICanvasRenderingContext2D::fillText.

<head>
  <title>Stroke and Fill Text</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.font = "italic 200 36px/2 Unknown Font, sans-serif";
              ctx.strokeStyle = "blue"; // set stroke color to blue
              ctx.fillStyle = "red";  // set fill color to red
              ctx.lineWidth = "3";  //  set stroke width to 3pmx
              var i;
              for (i = 0; i < 450; i += 45) {
                  ctx.strokeText("Hello World", i, i);
                  ctx.fillText("Hello World", i, i);
              }
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500" border="1">Canvas not supported in this mode or browser.</canvas>
</body>
</html>

Partager via