W3Schools.com

HTML5 canvas fillText Method

HTML5 track Tag Reference HTML5 canvas reference

Example

write "Hello world" in the canvas:

Yor browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Try it yourself »

Definition and Usage

The fillText method specifies a text filled with a specified color.

Use the fillStyle attribute to specify a color, black is default and will be used if the fillStyle attribute is not specified.

The fillText method takes four parameters (text,x,y,maxWidth).

The first parameter represents the actual text.

The next two parameters represents the x and y coordinates of where to place the text on the canvas.

The last parameter is optional and represents the maximum width of the text, if the text is wider than the maxWidth the text will be displayd with a smaller font.

JavaScript syntax: context.fillText(text,x,y,maxWidth);

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The fillText method is supported in all major browsers.

The maxWidth parameter is not supported in Chrome or Safari.

The maxWidth parameter displays with a smaller font in Opera, but is displayed as narrower text in Internet Explorer and Firefox.

Parameter Values

Parameter Values Description Play it
text text The text that will be written on the canvas Play it »
x x-coordinate The canvas' x-coordinate of where to place the text Play it »
y y-coordinate The canvas' y-coordinate of where to place the text Play it »
maxWidth width Optional. The maximum allowed width of the text, in pixels Play it »

HTML5 track Tag Reference HTML5 canvas reference

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE