HTML and CSS Reference
In-Depth Information
Basic Text Display
Thesimplestwaytodefinetexttobedisplayedonthecanvasistosetthe context.font style
by using standard values for CSS font style attributes: font-style , font-weight , font-
size , and font-face .
Wewilldiscusseachoftheseattributesindetailintheupcomingsection SettingtheTextFont .
All youneed toknownowisthat afontdesignation ofsome type isrequired. Here isasimple
example of setting a 50-point serif font:
context . font = "50px serif" ;
You also need to set the color of the text. For filled text, you would use the con-
text.fillStyle attribute and set it using a standard CSS color, or with a CanvasGradient
or CanvasPattern object. We will discuss the latter two options later in the chapter.
Finally, you call the context.fillText() method, passing the text to be displayed and the x
and y positions of the text on the canvas.
The following is an example of all three basic lines of code required to display filled text on
HTML5 Canvas:
context . font = "50px serif"
context . fillStyle = "#FF0000" ;
context . fillText ( "Hello World" , 100 , 80 );
If you do not specify a font, the default 10px sans-serif will be used automatically.
Search WWH ::

Custom Search