Post
Ask Question

Create a Gradient Color Text Using HTML5

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.
  • Open start->Notepad.
  • The name of the editor is "Text".
wakakakakak.gif
 
Step 2 : Create a folder on a desktop.
  • Right-click on desktop->new->Folder.
  • Name of folder is "Sam".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "DemoTextColor.aspx".
new.gif
 
webapplication.gif
 
Step 4 : Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "gradient.html".
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:


Similar Articles