Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Rendering Text | Text Images and Visual Styling
Quizzes & Challenges
Quizzes
Challenges
/
JavaScript Canvas Drawing and Animation

bookRendering Text

index.html

index.html

copy

To control how text appears on the canvas, you use several key properties of the drawing context. The font property sets the font style, size, and family for all text operations. For example, assigning "20px Verdana" to ctx.font will draw text in Verdana at 20 pixels high. The textAlign property determines how text is horizontally aligned relative to the x-coordinate you provide. Its values include "left", "right", "center", "start", and "end". The textBaseline property controls the vertical positioning of the text relative to the y-coordinate, with options such as "top", "hanging", "middle", "alphabetic", "ideographic", and "bottom". By combining these properties, you can precisely position and style text on your canvas.

index.html

index.html

copy

Sometimes you need to know how much space your text will take up before drawing it, especially when laying out multiple elements or centering text. The measureText method lets you measure the width of a specific string with the current font settings. This helps you align or wrap text accurately within your canvas area.

1. Which method is used to draw filled text on the canvas?

2. What property controls the horizontal alignment of text on the canvas?

question mark

Which method is used to draw filled text on the canvas?

Select the correct answer

question mark

What property controls the horizontal alignment of text on the canvas?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 1

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you give an example of how to use these text properties in code?

What are the default values for these text properties?

How does `measureText` work in practice?

Awesome!

Completion rate improved to 5.88

bookRendering Text

Swipe um das Menü anzuzeigen

index.html

index.html

copy

To control how text appears on the canvas, you use several key properties of the drawing context. The font property sets the font style, size, and family for all text operations. For example, assigning "20px Verdana" to ctx.font will draw text in Verdana at 20 pixels high. The textAlign property determines how text is horizontally aligned relative to the x-coordinate you provide. Its values include "left", "right", "center", "start", and "end". The textBaseline property controls the vertical positioning of the text relative to the y-coordinate, with options such as "top", "hanging", "middle", "alphabetic", "ideographic", and "bottom". By combining these properties, you can precisely position and style text on your canvas.

index.html

index.html

copy

Sometimes you need to know how much space your text will take up before drawing it, especially when laying out multiple elements or centering text. The measureText method lets you measure the width of a specific string with the current font settings. This helps you align or wrap text accurately within your canvas area.

1. Which method is used to draw filled text on the canvas?

2. What property controls the horizontal alignment of text on the canvas?

question mark

Which method is used to draw filled text on the canvas?

Select the correct answer

question mark

What property controls the horizontal alignment of text on the canvas?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 1
some-alt