現在ログインしていません。
新規アカウント作成
ログイン

CanvasRenderingContext2D.fillText(English)

fillText method

Specifications that this article explain about

HTML5 HTML syntax ◎ YES HTML5 XHTML syntax ◎ YES

Reference:HTML Canvas 2D Context 3/7/2012 Editor's Draft edition http://dev.w3.org/html5/2dcontext/

Draw fill outed string in canvas element.

1.Syntax

void fillText(DOMString text, double x, double y, optional double maxWidth);

Parameter

text

String to draw.

x

X coordinate to begin drawing. By default, it indicates the X coordinate of the start position of the text. textAlign field changes the meaning of x coordinate. Please take a look at following remarks section for the details.

y

Y coordinate to begin drawing. By default, it indicates the Y coordinate of the bottom position of the text. textBaseline field changes the meaning of x coordinate. Please take a look at following remarks section for the details.

maxWidth

It's optional. When this parameter specified, if text width is over this value, text will shrink horizontally to fit the value.

2.Remarks

Draw fill outed strings. The font field specified the font to draw. You can specify font as same as CSS font property except for few case. The details are in CSSFONT. Japanese font name is ignored such as "メイリオ", "MS 明朝", so the font name MUST be specified as English name such as "Meiryo", "MS Mincho".

You can use fillStyle field for paint style such as color or gradation.

This table shows how textAlign field changes meaning of x parameter.

value of textAlign field meaning of x parameter
left The x coordinate of the left side of the text.
right The x coordinate of the right side of the text.
center The x coordinate of the horizontal center of the text.
start The X coordinate of the start position of the text. It's different meaning between left to right writing such as English or Japanese, and right to left writing such as Hebrew or Arabian. Concretely, in case of the dir attribute of the canvas element is ltr, x coordinate means left side of the text, in case of rtl it means right side of the string.
end The x coordinate of the right side of the text. It means the end point x coordinate of the text。As same as start, In case of the dir attribute is ltr, is means x coordinate of the right side of the text, in case of rtl it means left side of the text.

This table shows how textBaseline field changes meaning of y parameter.

value of textBaseline field meaning of y parameter
top The top position of the text.It is same as top of em region.
hanging The upward position which is slightly lower than top of the text. It is same as hanging baseline.
middle The vertical center of the text. It is same as center of the em region.
alphabetic The downward position of the text. It is same as alaphabetic baseline. In case of most of alphabet characters, it is same as bottom of the character, but 'y' or 'g' are sticking out below. The most of ideographic characters sticking out below.
ideographic The bottom position of the text. It is same as ideographic baseline. The most of ideographic characters fit on this position. but 'y' or 'g' are still sticking out.
bottom The most bottom position of the text. It is same as the bottom of the em region. The most of characters appear above the position.

The following image shows actual position.

In instance, when font Baseline = 'top' and y coordinate is 100, the text is drawn below y-coodinate 100. When fontBaseline = 'bottom', the text is drawn above y coordinate 100.

I got this image by running following program in IE9 and Chrome18. It is differenct from specification of the CANVAS2D, I found top and hanging is same position, and also alphabetic and ideographic is same position too. I think there may be a possibility that incompleted implemention of CANVAS2DS is in IE9 or Chrome18, or I may have made miss choice of font. I have no idea.

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');

g.font = '24pt Meiryo'
g.textBaseline = 'hanging';
g.fillText('Say Üä 日本 にほん', 10, 100);

g.fillStyle = 'red';
g.fillRect(10, 100, 300, 1);
g.fillText(g.textBaseline, 400, 100);
■リスト1:

3.Sample

This program draw "Hello, Canvas!" in the canvas element.

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');
g.fillText('Hello, Canvas!', 10, 100);
■リスト2:

This program draw string with red 16 point Meiryo font to the canvas.

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');
g.font = '16pt Meiryo'
g.fillStyle = 'red';
g.fillText('Hello, Canvas!', 10, 100);
■リスト3: This program fill string with gradation.

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');
g.font = '48pt Bold Meiryo'

var gradation = g.createLinearGradient(50, 80, 50, 100);
gradation.addColorStop(0.0, 'lime');
gradation.addColorStop(1.0, 'red');

g.fillStyle = gradation;
g.fillText('花鳥風月', 10, 100);
■リスト4:

花 means flower, 鳥 means bird, 風 means wind, 月 means moon. 花鳥風月 means beautiful nature.