Share via

font property

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

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>
  • Last updated on