fillText() と strokeText() メソッドには、 text, x, y そして任意で maxWidth の3つ、もしくは4つの引数を与えます。そして、指定された text が指定された座標 (x, y) にレンダリングされます。もし maxWidth が引数に指定された場合は、それより決して横幅が広くならないようにレンダリングされます。 レンダリングの際には、現在の font, textAlign, textBaseline の値が適用されます。特に、このメソッドが呼び出されると、ユーザーエージェントは、次の手順を実行しなければいけません：

1. font を、コンテキストの現在のフォントにします。font 属性にセットされた値を適用します。

2. text にあるすべての空白文字を U+0020 SPACE 文字に置き換えます。

3. テキスト text が入ったひとつのインライン・ボックスを入れた、無限に幅が広い仮想の CSS ライン・ボックスを形成します。この CSS ライン・ボックスは、すべてのプロパティに初期値を持ちます。ただし、font にセットされているインライン要素の 'font' プロパティと、canvas 要素の方向性にセットされたインライン・ボックスの 'direction' プロパティは除外されます。[CSS]

4. 引数 maxWidth が指定され、仮想のラインボックス内のインライン・ボックスの仮想の横幅が CSS ピクセル maxWidth より大きい場合は、font を、より幅の短いフォント（利用可能で、当然ではあるが、可読なのであれば、そのフォントに水平方向に倍率を適用して合成したものでも良い）や、より小さいフォントを持つように変更します。そして、前のステップに戻ります。

5. 次のように、anchor point を、 textAlign と textBaseline の値で特定できるインライン・ボックス上の地点とします：

   水平位置：

   textAlign が left の場合

   textAlign が start で、canvas 要素の方向性が 'ltr' の場合

   textAlign が end で、canvas 要素の方向性が 'rtl' の場合

   anchor point の水平位置をインライン・ボックスの左端とする。

   textAlign が right の場合

   textAlign が end で、canvas 要素の方向性が 'ltr' の場合

   textAlignがstartで、canvas 要素の方向性が 'rtl' の場合

   anchor point の水平位置をインライン・ボックスの右端とする。

   textAlign が center の場合

   anchor point の水平位置をインライン・ボックスの左端と右端の真ん中とする。

   垂直位置：

   textBaseline が top の場合

   anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの em ボックスの上端とする。

   textBaseline が hanging の場合

   anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの hanging baseline とする。

   textBaseline が middle の場合

   anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの em ボックスの下端と上端の真ん中とする。

   textBaseline が alphabetic の場合

   anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの alphabetic baseline とする。

   textBaseline が ideographic の場合

   anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの ideographic baseline とする。

   textBaseline が bottom の場合

   anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの em ボックスの下端とする。

6. テキストの絵文字によって与えられた形状で仮想のインライン・ボックスを描画します。この形状は、現在の変換マトリックスによって変形されたものです。現在の変換マトリックスを適用する前は、anchor point は (x, y) で、各 CSS ピクセルが座標空間の 1 単位にマッピングされているよう、位置特定および伸縮が行われた上で描画されます。

   fillText() では、fillStyle が絵文字に適用され、strokeStyle は無視されます。 strokeText()では、逆に、strokeStyle が絵文字のアウトラインに適用され、fillStyle は無視されます。

   テキストは現在のパスに影響を及ぼすことなしに描画されます。そして、 shadow 効果, グローバル・アルファ, クリッピング領域, グローバル・コンポジション演算子の対象となります。