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:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>HTML5 Tutorial: Text Drawing with Fancy Colors and Effects</title>
</head>
<body>
<canvas id="mycanvas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
</script>
</body>
</html>
The final result for this tutorial
The final result for this tutorial

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:

ctx.rotate(-0.25);

We now have our final result: a fancy text with a gradient, a shadow and a bit of rotation!

This article was written by Simeon Visser. I am earning money online by writing here at HubPages.com. Would you like to earn money online as well? Read the success stories and sign up today to get started!

Did you like this tutorial?

Please take a few moments to let me know what you think about this tutorial. Just click on any of the feedback buttons below or leave a comment in the comments section.

More by this Author


Comments 7 comments

livelonger profile image

livelonger 5 years ago from San Francisco

Wow! Pretty amazing, and a very easy-to-follow tutorial.


simeonvisser profile image

simeonvisser 5 years ago Author

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.


wavegirl22 profile image

wavegirl22 5 years ago from New York, NY

super amazing. And I think I actually understand a thing or 2. Your tutorials are just what I have been looking for!!


simeonvisser profile image

simeonvisser 5 years ago Author

@wavegirl22: I'm glad the tutorials can be of help! Just post a comment if I need to clarify something.


InduswebiTech profile image

InduswebiTech 4 years ago from Rama Road, Kirti Nagar, New Delhi, India

really great tips.. thanks


ramsha 4 years ago

good work!!! i like it


tran mai 4 years ago

phân phối máy sưởi số lượng lớn

http://vinastar.vn/c185/may-suoi.html

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

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working