Introduction

This is a simple application for beginners that shows how to create a gradient color text on a canvas using HTML5. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop a gradient color text on a canvas application. <canvas> is an HTML element which can be used to draw graphics using scripting. It can be used to draw graphs to make photo compositions or do simple animations. The <canvas> element is a bitmap drawing API and once you have committed to a set of pixels you are stuck with them. The Canvas tag is an important tag of an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create a gradient color text on a canvas using HTML5 tools.
Step 1: First open an HTML editor such as Notepad.
wakakakakak.gif
Step 2 : Create a folder on a desktop.
folder.gif
Step 3: Open Visual Studio.
new.gif
webapplication.gif
Step 4 : Add an HTML file to your web application.
html.gif
Step 5: Now in this step we create a variable named "elem" and assign a canvas id.
Code
  1. window.addEventListener('load', function ()
  2. {
  3. var elem = document.getElementById('myCanvas');
  4. if (!elem || !elem.getContext)
  5. {
  6. return;
  7. }
  8. var Syntext = elem.getContext('2d');
  9. if (!Syntext)
  10. {
  11. return;
  12. }
Step 6: Now in this step we set a color hex code of a text and set destination of an x and y coordinate.
Code
  1. var COLOR, hue = [
  2. [0, 255, 0],
  3. [255, 255, 0],
  4. [0, 255, 0],
  5. [0, 255, 255],
  6. [0, 0, 255],
  7. [255, 0, 255],
  8. [51, 255, 153]],
  9. gradient = Syntext.createLinearGradient(0, 0, elem.width, 0);
  10. for (var i = 0; i <= 6; i++) {
  11. COLOR = 'rgb(' + hue[i][0] + ', ' + hue[i][1] + ', ' + hue[i][2] + ')';
  12. gradient.addColorStop(i * 1 / 6, COLOR);
  13. }
Step 7: Now in this step we used a gradient for the fill Style and draw a rectangle with a black shadow.
Code
  1. Syntext.shadowOffsetX = 10;
  2. Syntext.shadowOffsetY = 10;
  3. Syntext.shadowBlur = 8;
  4. Syntext.shadowColor = 'rgba(0, 0, 0, 0.5)';
  5. Syntext.fillRect(10, 10, 400, 200);
Step 8 : Now in this step we set a text family of a color text
Code
  1. Syntext.font = 'bold 200px sans-serif';
  2. Syntext.textBaseline = 'top';
  3. Syntext.font = 'bold 200px Verdana';
  4. context.textBaseline = 'top';
  5. Syntext.font = 'bold 200px sans-serif';
  6. context.textBaseline = 'top';
  7. if (Syntext.fillText)
  8. {
  9. Syntext.fillText('Csharpcorner', 10, 220, 300);
  10. }
  11. . Syntext.strokeStyle = '#666';
  12. if (Syntext.strokeText)
  13. {
  14. Syntext.strokeText('Csharpcorner', 10, 220, 300);
  15. }
  16. }, false);
Step 9: The complete demo of a color text code is given below.
Code
  1. <html>
  2. <head>
  3. <title>Tom application</title>
  4. <script type="text/javascript">
  5. window.addEventListener('load', function () {
  6. var elem = document.getElementById('myCanvas');
  7. if (!elem || !elem.getContext) {
  8. return;
  9. }
  10. var Syntext = elem.getContext('2d');
  11. if (!Syntext) {
  12. return; }
  13. var COLOR, hue = [
  14. [0, 255, 0], [255, 255, 0], [0, 255, 0], [0, 255, 255],
  15. [0, 0, 255], [255, 0, 255],
  16. [51, 255, 153]],
  17. gradient = Syntext.createLinearGradient(0, 0, elem.width, 0);
  18. for (var i = 0; i <= 6; i++) {
  19. COLOR = 'rgb(' + hue[i][0] + ', ' + hue[i][1] + ', ' + hue[i][2] + ')';
  20. gradient.addColorStop(i * 1 / 6, COLOR);
  21. }
  22. Syntext.shadowOffsetX = 10;
  23. Syntext.shadowOffsetY = 10;
  24. Syntext.shadowBlur = 8;
  25. Syntext.shadowColor = 'rgba(0, 0, 0, 0.5)';
  26. Syntext.fillRect(10, 10, 400, 200);
  27. Syntext.font = 'bold 200px sans-serif';
  28. Syntext.textBaseline = 'top';
  29. Syntext.font = 'bold 200px Verdana';
  30. context.textBaseline = 'top';
  31. Syntext.font = 'bold 200px sans-serif';
  32. context.textBaseline = 'top';
  33. if (Syntext.fillText) {
  34. Syntext.fillText('Csharpcorner', 10, 220, 300);
  35. }
  36. . Syntext.strokeStyle = '#666';
  37. if (Syntext.strokeText) {
  38. Syntext.strokeText('Csharpcorner', 10, 220, 300);
  39. }
  40. }, false);
  41. </script>
  42. </head>
  43. <body bgcolor="#ff99cc">
  44. <p><canvas id="myCanvas" width="600" height="500"></canvas></p>
  45. </body>
  46. </html>
Step 10: Press Ctrl + F5 to run the application in a browser.
Output
1.gif
2.gif
3.gif
Resources
Here are some useful resources: