Text E-mail
Canvas element
Canvas context
Transformations
Compositing
Colours
Context styles
Gradients
Patterns
Line styles
Shadows
Simple shapes
Paths
Text
Images
Pixel manipulation
Example: Webtris

The font and text methods are not yet implemented in Opera.

context.font [ = value ]

  • Returns the current font settings.
  • Can be set, to change the font. The syntax is the same as for the CSS 'font' property, a string including font typeface, size and style.
  • Values that cannot be parsed as CSS font values are ignored.
  • Relative keywords and lengths are computed relative to the font of the canvas element.
  • Use web safe fonts to ensure that the font selected is available on the user's machine.
  • Web safe fonts include 'Arial', 'Helvetica', 'Times New Roman', 'Times', 'Courier New' & 'Courier'.

context.textAlign [ = value ]

  • Returns the current text alignment settings.
  • value must be one of 'start' (default), 'end', 'left', 'right' or 'center'.
  • Other values are ignored.

context.textBaseline [ = value ]

  • Returns the current baseline alignment settings.
  • Can be set to change the baseline alignment.
  • value must be one of 'top', 'hanging', 'middle', 'alphabetic' (default), 'ideographic', or 'bottom'.

context.fillText(text, x, y [, maxWidth ] );
context.strokeText(text, x, y [, maxWidth ] );

  • Fills or strokes (respectively) the given text at the given position.
  • If maxWidth is provided, the text will be scaled to fit that width if necessary.
  • y is measured from the font baseline, not the top of the text.

metrics = context.measureText(text);

  • Returns a TextMetrics object with the metrics of the given text in the current font.

metrics.width

  • Returns the advance width of the text that was passed to the measureText() method.

Unfortunately, your browser does not support modern web standards.
Please use one of the supported browsers listed below, they're free to download and use.

Supported browsers: Firefox, Safari, Chrome, Opera, and Konqueror.


Source (click to expand)

var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

function demoBaseline(x, y, value) {
  ctx.textBaseline = value; 
  ctx.fillText(value, x, y);
}

function demoAlign(x, y, value) {
  ctx.textAlign = value;
  ctx.fillText(value, x, y);
}

// Some example font styles.
ctx.font = "30pt helvetica";
ctx.fillText("Helvetica 30pt", 20, 40);
ctx.font = "20pt times bold";
ctx.strokeText("Times 20pt bold", 20, 70);
ctx.font = "12pt courier bold";
ctx.fillText("12pt courier bold", 20, 90);

// Demonstrate text baseline
var y = 130;
ctx.save(); 

// Draw a couple of baselines.
ctx.strokeStyle = "#00AAFF";
ctx.beginPath(); 
ctx.moveTo(20, y); 
ctx.lineTo(300, y); 
ctx.moveTo(20, y + 40);
ctx.lineTo(300, y + 40);
ctx.stroke(); 

// Render the basline types.
ctx.font = "15pt helvetica";
demoBaseline(20, y, 'top'); 
demoBaseline(120, y, 'hanging'); 
demoBaseline(240, y, 'middle'); 
demoBaseline(20, y + 40, 'alphabetic'); 
demoBaseline(120, y + 40, 'ideographic'); 
demoBaseline(240, y + 40, 'bottom'); 

ctx.restore();

// Demonstrate the alignments.
y = 210;
ctx.save();

// Draw a line marking the text start.
ctx.strokeStyle = "#00AAFF";
ctx.beginPath();
ctx.moveTo(160, y - 10); 
ctx.lineTo(160, y + 120); 
ctx.stroke();

// Render the alignment types
ctx.font = "15pt helvetica";
demoAlign(160, y + 20, 'start', 140);
demoAlign(160, y + 40, 'end', 140);
demoAlign(160, y + 60, 'left', 140);
demoAlign(160, y + 80, 'right', 140);
demoAlign(160, y + 100, 'center', 140);

ctx.restore();