Canvas Text

Last Updated:

How to fill the Text

Your browser does not support the canvas element.

To fill the text, follow these steps

  1. canvas - Assigning the canvas element to a variable.
  2. ctx - Assigning the 2d rendering context to another variable by calling the getContext('2d') method.
  3. font - Use font canvas property to specify the current text style to use when drawing text.
  4. fillText() - Use fillText() canvas method to draw a text string at the specified coordinates, filling the string's characters with the current fillStyle. The default fillStyle color is 'black'.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="160" height="40"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("point"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 2, 30); </script> </body> </html>

Syntax

ctx.fillText(text, x, y, maxWidth)

Attributes Value

ValueExplanation
text Specifies a DOMString specifying the text string to render into the context.
x Specifies the x-axis coordinate of the point at which to begin drawing the text, in pixels.
y Specifies the y-axis coordinate of the point at which to begin drawing the text, in pixels.
maxWidth Specifies the maximum number of pixels wide the text may be once rendered.

How to stroke the Text

Your browser does not support the canvas element.

To stroke the text, follow these steps

  1. canvas - Assigning the canvas element to a variable.
  2. ctx - Assigning the 2d rendering context to another variable by calling the getContext('2d') method.
  3. font - Use font canvas property to specify the current text style to use when drawing text.
  4. strokeText - Use strokeText() canvas method to draw the outlines of the characters of a text string at the specified coordinates, stroking the string's characters with the current strokeStyle. The default strokeStyle color is 'black'.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="160" height="40"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("point"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World", 2, 30); </script> </body> </html>

How to Custom the Text

Your browser does not support the canvas element.

To custom the text use font, textAlign, textBaseline, and direction canvas properties. The following example will demonstrate how to custom the canvas text.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="250" height="40" style="border:1px solid #8c8c8c;"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("point"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.fillStyle = "#339933"; ctx.textAlign = "center"; ctx.textBaseline = 'middle'; ctx.fillText("Hello World", canvas.width/2, canvas.height/2); </script> </body> </html>

Share this Page

Meet the Author