HTML5 Tutorial: Draw Text on Canvas with Fancy Colors, Gradient, and Effects
How to create WordArt in HTML5
In this tutorial I'll show 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 where I explain what the following HTML5 code means as well as 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 do each of these effects and if you combine them well it'll 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:
ctx.font = "bold 36px sans-serif";
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!
ctx.font = "bold 36px sans-serif"; ctx.fillText("HubPages", 10, 100);
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:
ctx.fillStyle = "rgb(255, 0, 0)";
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:
ctx.font = "bold 36px sans-serif"; ctx.shadowColor = "rgb(190, 190, 190)"; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillText("HubPages", 10, 100);
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.
ctx.font = "bold 36px sans-serif"; ctx.shadowColor = "rgb(190, 190, 190)"; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowBlur = 10; ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillText("HubPages", 10, 100);
This is a nice start: we've got colored text and a shadow. But we can do more: let's introduce gradients which 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:
var gradient = ctx.createLinearGradient(0, 0, 150, 100); gradient.addColorStop(0, "rgb(255, 0, 0)"); gradient.addColorStop(1, "rgb(255, 255, 0)"); ctx.fillStyle = gradient;
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!
Like this tutorial? Check out this HTML5 tutorial!
- 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.