HTML and CSS Reference
In-Depth Information
Font Weight:
<select id="fontWeight">
<option value="normal">normal</option>
<option value="bold">bold</option>
<option value="bolder">bolder</option>
<option value="lighter">lighter</option>
</select>
<br>
Font Style:
<select id="fontStyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<br>
Text Baseline <select id="textBaseline">
<option value="middle">middle</option>
<option value="top">top</option>
<option value="hanging">hanging</option>
<option value="alphabetic">alphabetic</option>
<option value="ideographic">ideographic</option>
<option value="bottom">bottom</option>
</select>
<br>
Text Align <select id="textAlign">
<option value="center">center</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</div>
</body>
</html>
Text and the Canvas Context
We've already discussed a couple Canvas context properties that affect the canvas in a
global fashion:
fillStyle
and
strokeStyle
. However, there are two areas that visually
demonstrate how changes to the properties of the context can affect the entire HTML5
Canvas: alpha transparencies and shadows.
Global Alpha and Text
Using alpha is a cool way to make objects seem to be partially or fully transparent on
HTML5 Canvas. The
globalAlpha
property of the Canvas context is used for this pur-
pose. After
globalAlpha
is applied, it affects all drawing on the canvas, so you need to
be careful when setting it.
