- Introduction To HTML
- HTML Elements And Tags
- Text Formatting And Styling
- Images And Multimedia
- Hyperlinks And Anchors
- Tables And Forms
- HTML5 Semantic Elements
- Responsive Design And Meta Tags
- Embedded Content And APIs
- Canvas
- Drawing Basic Shapes
- Working With Text And Fonts
- Working With Images
- Canvas Transformations
- Working With Animation
- Interactivity And Event Handling
- Canvas Advanced
- Introduction To SVG
- SVG Gradients And Patterns
- SVG Transformations And Transitions
- SVG Filters And Effects
- SVG Paths And Bezier Curves
- SVG Icons And Illustrations
- SVG Responsive Design And Accessibility
Working with Text and Fonts
Adding Text To The Canvas Using The FillText And StrokeText Methods
Using fillText Method:
The fillText method is used to render filled text on the canvas. It takes several parameters:
text: The text string to be rendered.
- x: The x-coordinate of the starting point for the text.
- y: The y-coordinate of the starting point for the text.
- Optional: maxWidth - Maximum width for the text to be rendered. If provided, the browser will adjust the text to fit within this width.
Here's an example of how you can use fillText:
const context = canvas.getContext('2d');
context.font = '30px Arial'; // Set the font size and type
context.fillStyle = 'red'; // Set the text color
context.fillText('Hello, World!', 50, 50); // Render filled text at coordinates (50, 50)
In this example:
- We set the font size and type using context.font.
- The text color is set using context.fillStyle.
- Then we use context.fillText to render the text "Hello, World!" at coordinates (50, 50) on the canvas.
Using strokeText Method:
The strokeText method is used to render outlined (stroked) text on the canvas. It also takes similar parameters as fillText:
text: The text string to be rendered.
x: The x-coordinate of the starting point for the text.
y: The y-coordinate of the starting point for the text.
Optional: maxWidth - Maximum width for the text to be rendered.
Here's an example of using strokeText:
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.font = '30px Arial'; // Set the font size and type
context.strokeStyle = 'blue'; // Set the text outline color
context.lineWidth = 2; // Set the outline width
context.strokeText('Hello, World!', 50, 50); // Render stroked text at coordinates (50, 50)
In this example:
- We set the font size and type using context.font.
- The text outline color is set using context.strokeStyle.
- context.lineWidth sets the width of the outline.
- We use context.strokeText to render the text "Hello, World!" with an outline at coordinates (50, 50) on the canvas.
Example with Both fillText and strokeText:
You can combine fillText and strokeText to create text with both filled and outlined appearance:
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.font = '30px Arial'; // Set the font size and type
context.fillStyle = 'red'; // Set the fill color
context.strokeStyle = 'blue'; // Set the outline color
context.lineWidth = 2; // Set the outline width
context.fillText('Hello, World!', 50, 50); // Render filled text at coordinates (50, 50)
context.strokeText('Hello, World!', 50, 50); // Render stroked text at coordinates (50, 50)
This code will render the text "Hello, World!" on the canvas with a red fill color and a blue outline.
Practice Excercise Practice now
Customizing Text Styles Such As Font Size, Font Family, And Font Weight
Font Size:
The font property in canvas allows you to set the font size along with other font properties like font family. Here's an example of how to customize font size:
const ctx = canvas.getContext('2d');
// Set font size and family
ctx.font = '30px Arial';
ctx.fillText('Hello, World!', 50, 50); // Render text at coordinates (50, 50)
In this example:
We use ctx.font = '30px Arial'; to set the font size to 30 pixels and the font family to Arial.
Then, we use ctx.fillText to render the text "Hello, World!" on the canvas.
Font Family:
You can specify the font family using the font property. Here's an example:
const ctx = canvas.getContext('2d');
// Set font size and family
ctx.font = 'italic bold 30px Times New Roman';
ctx.fillText('Hello, World!', 50, 50); // Render text at coordinates (50, 50)
In this example:
- We use ctx.font = 'italic bold 30px Times New Roman'; to set the font style to italic, font weight to bold, font size to 30 pixels, and font family to Times New Roman.
- Then, we use ctx.fillText to render the text "Hello, World!" using the specified font style.
Font Weight:
The font weight property determines how thick or thin characters in text should be displayed. Here's an example of setting font weight:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Set font size, family, and weight
ctx.font = 'bold 30px Arial';
ctx.fillText('Hello, World!', 50, 50); // Render text at coordinates (50, 50)
In this example:
- We use ctx.font = 'bold 30px Arial'; to set the font weight to bold along with the font size and family.
- Then, we use ctx.fillText to render the text "Hello, World!" using the specified font weight.
- Example with Multiple Customizations:
You can combine multiple customizations in the font property. Here's an example:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Set font size, family, weight, and style
ctx.font = 'italic bold 30px Arial';
ctx.fillText('Hello, World!', 50, 50); // Render text at coordinates (50, 50)
In this example:
- We use ctx.font = 'italic bold 30px Arial'; to set the font style to italic, font weight to bold, font size to 30 pixels, and font family to Arial.
- Then, we use ctx.fillText to render the text "Hello, World!" with all specified font customizations.
Practice Excercise Practice now
Measuring And Aligning Text Within The Canvas
Measuring Text:
Before aligning text, it's often necessary to measure the dimensions of the text to position it accurately. The measureText method in the canvas context (ctx) is used to measure the width of a given text string. Here's an example:
const ctx = canvas.getContext('2d');
const text = 'Hello, World!';
const textMetrics = ctx.measureText(text);
const textWidth = textMetrics.width;
console.log('Text Width:', textWidth);
In this example:
- We define a text string 'Hello, World!'.
- We use ctx.measureText(text) to measure the width of the text.
- The measured width is stored in textMetrics.width and can be used for alignment or other calculations.
Aligning Text:
Once the text width is known, it can be used to align text horizontally within the canvas. The textAlign property is used to set the horizontal alignment of text.
Here are the alignment options:
- 'left': Aligns the text to the left (default).
- 'center': Aligns the text to the center horizontally.
- 'right': Aligns the text to the right.
- Here's an example of aligning text to the center:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.textAlign = 'center'; // Align text to the center horizontally
ctx.fillText('Hello, World!', canvas.width / 2, canvas.height / 2); // Centered text
In this example:
- We set the font size and family using ctx.font.
- We set the horizontal alignment to center using ctx.textAlign = 'center';.
- The text 'Hello, World!' is rendered at the center of the canvas horizontally using ctx.fillText.
Vertical Alignment:
Vertical alignment of text can be achieved by adjusting the baseline using the textBaseline property. Here are the baseline options:
- 'top': Aligns the text to the top of the bounding box.
- 'middle': Aligns the text vertically centered.
- 'bottom': Aligns the text to the bottom of the bounding box.
- 'alphabetic': Aligns the text baseline with the alphabetic baseline.
- 'hanging': Aligns the text baseline with the hanging baseline.
- 'ideographic': Aligns the text baseline with the ideographic baseline.
Here's an example of vertically aligning text to the middle:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.textBaseline = 'middle'; // Align text vertically centered
ctx.fillText('Hello, World!', canvas.width / 2, canvas.height / 2); // Vertically centered text
In this example:
- We set the font size and family using ctx.font.
- We set the vertical alignment to middle using ctx.textBaseline = 'middle';.
- The text 'Hello, World!' is rendered at the middle of the canvas vertically.
Practice Excercise Practice now