Simeon Visser is a writer who enjoys covering topics such as technology and travel.
In this tutorial, I will cover various effects that you can use when drawing text on an HTML5 canvas. Some of these will remind you of the well-known WordArt effects from Microsoft Word! This tutorial builds upon my other tutorial on the basics of drawing on a HTML5 canvas. This previous article explains the meaning of the HTML5 code and covers other basics of the HTML5 canvas, such as its coordinate system.
In HTML5 you can give your text a fancy look by adding a shadow, a colored gradient, and by rotating the text. We are going to practice each of these effects, and if you combine them it will look very nice.
Let's start with a basic empty HTML5 webpage:
Basics of Text Drawing in HTML5
You can draw text at a particular location on the canvas using strokeText or fillText. Like drawing shapes the strokeText only draws the outline of the text and fillText also colors the inside of the text. These commands take three arguments: the text itself, the x-coordinate of where to draw the text and the y-coordinate. For starters, the coordinates are roughly the bottom-left corner of the box that surrounds the main part of the text. You can view it as the starting point of the line on which the text characters are drawn. Discussing this would be a subject in itself and that's beyond the scope of this tutorial.
We can specify the font using the font attribute of the context:
This is a textual description of the font that should be use to draw the text. You can specify the style (bold / italic), the size (36px) and the name of the font or font family (in this case the font family sans-serif). You can specify a font by name (like Arial) but you can also specify a font family which is a group of fonts. The computer on which the webpage is displayed decides which one from that font family it's going to be. Users can change the font to be used in the settings of their web browser.
For example, the sans-serif represents a font family of fonts without serifs. Try changing it to serif or monospace to see what font you get!
The above specifies the font and it fills the text "HubPages" at the location (10, 100). Good, now we've got some text on there but it's nothing fancy yet: it's just black text! Like any other shape you can change the fillStyle to change the color of the text. Putting the following line before the fillText command will give you red text:
Drawing Text With Shadow on HTML5 Canvas
Adding shadow is an easy way to make your text look a bit more fancy. You need to specify the color of the shadow and you need to indicate where the shadow should be relative to the text (or any other shape for that matter because the following works for anything you draw on an HTML5 canvas).
Modify your code so it looks like this:
As you can see, we've got shadowColor, shadowOffsetX and shadowOffsetY. The shadowColor is a gray one but you can also use a different color. The shadowOffsetX and shadowOffsetY move the shadow away from underneath the text. If you were to leave them both at 0, the light would be coming from above and you wouldn't see the shadow. These offset values (the value 10 for both x and y) mean that the shadow is moved to the right and down for 10 steps along both coordinate axes (not necessarily pixels).
But wait! The shadow is very sharp - that is not very realistic as shadows tend to be more blurry. Fortunately we can change this easily by giving shadowBlur a value. The higher this value the more blurry the shadow will be.
This is a nice start: we've got colored text and a shadow. But we can do more. Let's introduce gradients—these can really bump your texts from ordinary to fancy!
Drawing Text With Gradient on HTML5 Canvas
Instead of filling your texts in a single color, you can fill them using multiple colors. This is called a gradient where one color flows gradually into the next. We are going to use a linear gradient which does exactly that: we specify two colors and all the colors in between are automatically computed. This gives a nicely colored text.
We're going to add a gradient from red to yellow. Simply replace the line with fillStyle with the following:
The fillStyle is now a gradient instead of a color. We create the gradient by calling createLinearGradient of the drawing context. You need to give two points and in between those points the gradient will be applied. We use the starting point (0, 0) and the end point (150, 100).
We then specify colors using addColorStop. The first argument tells us how far the color is located away from the starting point. This is a value from 0 to 1 where 0 means at the starting point and 1 means at the end point. So a value of 0 means the color that you specify is for the starting point, a value of 0.5 means halfway in between both given coordinates and 1 means at the end point. We're giving the starting point the color red and the end point the color yellow. We are using two colors for our gradient but you can use more than two if you want.
Note that these coordinates are independent of your text and if you decide to change the location of your text it'll probably look different because it will then lookup the color information at that location. When you're using a gradient for fillStyle you're changing the colors for all fill commands (fillText, fillRect, etc) so you need to play a bit with the coordinates of your gradient and your text if it doesn't look the way you want it.
It is really starting to look fancy now. We have one more trick up our sleeve and that is using transformations to rotate the text.
Rotating Text on HTML5 Canvas
To rotate the text just add the rotate command. The argument is the angle of clockwise rotation in radians so use a negative value to rotate counterclockwise:
We now have our final result: a fancy text with a gradient, a shadow, and a bit of rotation!
More Ways to Use HTML5
- HTML5 Tutorial: Drawing Circles and Arcs
Drawing circles and arcs in HTML5 can be quite a challenge. In this tutorial I explain how to draw circles and arcs and how the angles of arcs are measured. This tutorial contains many examples.
This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.
tran mai on November 29, 2012:
phân phối máy sưởi số lượng lớn
VINASTAR - Nhà phân phối máy văn phòng, máy photocopy, máy công nghiệp, máy nông nghiệp, máy chấm công, máy chiếu, màn chiếu, máy đánh giầy, máy tính tiền, máy đếm tiền. »
Hotline: 0989 650 250 - 0165 654 9999
ramsha on October 14, 2012:
good work!!! i like it
InduswebiTech from Rama Road, Kirti Nagar, New Delhi, India on January 06, 2012:
really great tips.. thanks
simeonvisser (author) on January 07, 2011:
@wavegirl22: I'm glad the tutorials can be of help! Just post a comment if I need to clarify something.
Shari from New York, NY on January 07, 2011:
super amazing. And I think I actually understand a thing or 2. Your tutorials are just what I have been looking for!!
simeonvisser (author) on December 14, 2010:
Thanks for that! I may even write more HTML5 tutorials when more features are implemented in web browsers. It's really the next language of the web and the more tutorials there are, the better.
Jason Menayan from San Francisco on December 14, 2010:
Wow! Pretty amazing, and a very easy-to-follow tutorial.