HTML5 Tutorial: Draw Text on Canvas with Fancy Colors, Gradient, and Effects

Updated on December 9, 2016

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!

Questions & Answers

    Comments

      0 of 8192 characters used
      Post Comment

      • profile image

        tran mai 5 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

      • profile image

        ramsha 5 years ago

        good work!!! i like it

      • InduswebiTech profile image

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

        really great tips.. thanks

      • simeonvisser profile image
        Author

        simeonvisser 7 years ago

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

      • wavegirl22 profile image

        Shari 7 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
        Author

        simeonvisser 7 years ago

        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.

      • livelonger profile image

        Jason Menayan 7 years ago from San Francisco

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

      working

      This website uses cookies

      As a user in the EEA, your approval is needed on a few things. To provide a better website experience, turbofuture.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

      For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://turbofuture.com/privacy-policy#gdpr"

      Show Details
      Necessary
      HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
      LoginThis is necessary to sign in to the HubPages Service.
      Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
      AkismetThis is used to detect comment spam. (Privacy Policy)
      HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
      HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
      Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
      CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
      Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
      Features
      Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
      Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
      Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
      Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
      Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
      VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
      PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
      Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
      MavenThis supports the Maven widget and search functionality. (Privacy Policy)
      Marketing
      Google AdSenseThis is an ad network. (Privacy Policy)
      Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
      Index ExchangeThis is an ad network. (Privacy Policy)
      SovrnThis is an ad network. (Privacy Policy)
      Facebook AdsThis is an ad network. (Privacy Policy)
      Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
      AppNexusThis is an ad network. (Privacy Policy)
      OpenxThis is an ad network. (Privacy Policy)
      Rubicon ProjectThis is an ad network. (Privacy Policy)
      TripleLiftThis is an ad network. (Privacy Policy)
      Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
      Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
      Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
      Statistics
      Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
      ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
      Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)