Capt. Horatio T.P. Webb
HTML 5 -- CANVAS EXAMPLE #2 -- TEXT

Parks -- Fall 2013

Methods:
name_for_the_canvas_context.fillText(string,x,y);Text is filled using: color, gradient, or pattern
string is the text to be drawm
x is the horizontal position in pixels
y is the vertical position in pixels
name_for_the_canvas_context.strokeText(string,x,y);string is the text to be drawm
x is the horizontal position in pixels
y is the vertical position in pixels
name_for_the_canvas_context.measureText(string).widthReturns the width of the string in pixels
Properties:
You can group multiple font properties in one statement:

name_for_the_canvas_context.font = "value value value ...";

where the value are MULTIPLE font properties from below

e.g.,

name_for_the_canvas_context.font = "Arial bold 12px";

name_for_the_canvas_context.fontStyle = value;Values:
   normal
   italic
   oblique
name_for_the_canvas_context.fontVariant = value;Values:
   normal
   small-caps
name_for_the_canvas_context.fontWeight = value;Values:
   normal
   bold
   bolder
   lighter
name_for_the_canvas_context.fontSize = value;Values:
   size in pixels
name_for_the_canvas_context.lineHeight = valueValues:
   height in pixels
name_for_the_canvas_context.fontFamily = valueValues e.g.,:
   Times New Roman
   Arial,
   etc.
name_for_the_canvas_context.textAlign = valueValues e.g.,:
   "start" [this is the default],
   "left",
   "right",
   "center"

<canvas id="text_example" width="500" height="700"" style="border:solid blue 1px;"></canvas>

HTML 5 Canvas is NOT supported by this browser

Here is the code: 

var tex = document.getElementById("text_example");
var texc = tex.getContext("2d");
texc.font="24px Arial";
tstring="Now is the time for all good men to come to the aid of their party";

texc.strokeText(tstring,30,30);

texc.fillStyle="red";
texc.fillText(tstring,30,70);

texc.font="50px Arial";
texc.strokeText(tstring,30,120);

texc.fillStyle="green";
texc.fillText(tstring,30,170);

texc.font="bold 50px Arial";
texc.fillStyle="blue";
texc.strokeText(tstring,30,220);
texc.fillText(tstring,30,270);

texc.font="40px Arial";
texc.strokeText("width of blue string="+texc.measureText(tstring).width+" pixels",30,320);