Html canvas text style

HTML Canvas Text

To draw text on a canvas, the most important property and methods are:

• font — defines the font properties for the text
• fillText(text,x,y) — draws «filled» text on the canvas
• strokeText(text,x,y) — draws text on the canvas (no fill)

Using fillText()

Example

Set font to 30px «Arial» and write a filled text on the canvas:

Your browser does not support the HTML5 canvas tag.

const canvas = document.getElementById(«myCanvas»);
const ctx = canvas.getContext(«2d»);

ctx.font = «30px Arial»;
ctx.fillText(«Hello World», 10, 50);

Using strokeText()

Example

Set font to 30px «Arial» and write a text, with no fill, on the canvas:

Your browser does not support the HTML5 canvas tag.

const canvas = document.getElementById(«myCanvas»);
const ctx = canvas.getContext(«2d»);

ctx.font = «30px Arial»;
ctx.strokeText(«Hello World», 10, 50);

Add Color and Center Text

Example

Set font to 30px «Comic Sans MS» and write a filled red text in the center of the canvas:

Your browser does not support the HTML5 canvas tag.

const canvas = document.getElementById(«myCanvas»);
const ctx = canvas.getContext(«2d»);

ctx.font = «30px Comic Sans MS»;
ctx.fillStyle = «red»;
ctx.textAlign = «center»;
ctx.fillText(«Hello World», canvas.width/2, canvas.height/2);

See Also:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Drawing text

After having seen how to apply styles and colors in the previous chapter, we will now have a look at how to draw text onto the canvas.

Drawing text

The canvas rendering context provides two methods to render text:

Fills a given text at the given (x,y) position. Optionally with a maximum width to draw.

Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.

A fillText example

The text is filled using the current fillStyle .

function draw()  const ctx = document.getElementById("canvas").getContext("2d"); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); > 

canvas id="canvas" width="300" height="100">canvas> 

A strokeText example

The text is filled using the current strokeStyle .

function draw()  const ctx = document.getElementById("canvas").getContext("2d"); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); > 

canvas id="canvas" width="300" height="100">canvas> 

Styling text

In the examples above we are already making use of the font property to make the text a bit larger than the default size. There are some more properties which let you adjust the way the text gets displayed on the canvas:

The current text style being used when drawing text. This string uses the same syntax as the CSS font property. The default font is 10px sans-serif.

Text alignment setting. Possible values: start , end , left , right or center . The default value is start .

Baseline alignment setting. Possible values: top , hanging , middle , alphabetic , ideographic , bottom . The default value is alphabetic .

Directionality. Possible values: ltr , rtl , inherit . The default value is inherit .

These properties might be familiar to you, if you have worked with CSS before.

The following diagram from the WHATWG demonstrates the various baselines supported by the textBaseline property.

A textBaseline example

Edit the code below and see your changes update live in the canvas:

canvas id="canvas" width="400" height="200" class="playable-canvas">canvas> div class="playable-buttons"> input id="edit" type="button" value="Edit" /> input id="reset" type="button" value="Reset" /> div> textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100); textarea> 

const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const textarea = document.getElementById("code"); const reset = document.getElementById("reset"); const edit = document.getElementById("edit"); const code = textarea.value; function drawCanvas()  ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); > reset.addEventListener("click", () =>  textarea.value = code; drawCanvas(); >); edit.addEventListener("click", () =>  textarea.focus(); >); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); 

Advanced text measurements

In the case you need to obtain more details about the text, the following method allows you to measure it.

Returns a TextMetrics object containing the width, in pixels, that the specified text will be when drawn in the current text style.

The following code snippet shows how you can measure a text and get its width.

function draw()  const ctx = document.getElementById("canvas").getContext("2d"); const text = ctx.measureText("foo"); // TextMetrics object text.width; // 16; > 

Accessibility concerns

The element is just a bitmap and does not provide information about any drawn objects. Text written on canvas can cause legibility issues with users relying on screen magnification. The pixels within a canvas element do not scale and can become blurry with magnification. This is because they are not a vector but letter-shaped collection of pixels. When zooming in on it, the pixels become bigger.

Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. An alternative is to use HTML elements or SVG instead of canvas.

Gecko-specific notes

In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some prefixed APIs were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.

Found a content problem with this page?

This page was last modified on Feb 19, 2023 by MDN contributors.

Источник