Canvas Text

❮ PrevNext ❯

How to fill the Text

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>
Run

Syntax

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

Attributes Value

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

How to stroke the Text

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>
Run

How to Custom the Text

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>
Run

Reminder

Hi Developers, we almost covered 93% of Canvas Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in Canvas.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author