Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining

font property

Gets or sets the current font for the context.

This property is read/write.

HTML Canvas 2D Context, Section 11Internet Explorer 9



HRESULT put_font(

HRESULT get_font(
  [out, retval] 

Property values

Type: string

The current font description.

Standards information


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.


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

  <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);
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500" border="1">Canvas not supported in this mode or browser.</canvas>



Community Additions

© 2015 Microsoft