HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 canvas strokeText Method

HTML5 track Tag Reference HTML5 canvas reference

Example

Write "Hello World" in the canvas, using the strokeText() method:

JavaScript:

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

Try it yourself »

Definition and Usage

The strokeText method species text on the canvas, drawn wit the specified color.

The strokeText method does not fill the letters with color, only the "borders".

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

The strokeText 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.strokeText(text,x,y,maxWidth);

Browser Support

The strokeText 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 »