HTML 5

Creation of Gradients in HTML Canvas

Canvas Gradient

The word gradient can be simply defined as the pattern of colors that change from one color to another.

Canvas gradients in HTML are the patterns of color that can be used to fill and stroke shapes, like rectangle, circle, triangle, text, lines and so on. On the canvas, shapes are not limited to solid colors.

The following are a few samples to understand what I want to say.

    

The Canvas Gradient interface represents an opaque object describing a gradient and it is returned by the following methods:

  • createLinearGradient(x1, y1, x2, y2)
  • createRadialGradient(x1, y1, r1, x2, y2, r2)

One additional method is also used for adding two or more color stops once we have a gradient object. The method is addColorStop(offset, color) that adds a color stop with the given color to the gradient at the given offset value. Gradient position can be anywhere between 0 & 1. For example, 0.0 is the offset at one end and 1.0 offset at the other end. If the offset value does not lie between 0 & 1, then INDEX_SIZE_ERR is raised and if the color is not parsed as CSS <color>, SYNTAX_ERR is raised.

Method: createLinearGradient(x1, y1, x2, y2)

Linear gradients are defined as the imaginary line that defines the direction of the gradient by which it changes color in a linear pattern. Once we have created the gradient, we can insert various colors using the addColorStop() property.

In other words, this method returns a CanvasGradient object that represents a linear gradient that changes color along the line given by the coordinates represented by the argument. A linear gradient can be created using the 2D context function createLinearGradient(). This function contains the four parameters x1, y1, x2 and y2 that determines the direction and extension of the gradient pattern. The gradient lies between the starting coordinates (x1, y1) and the ending coordinates (x2, y2).

There can be three types of gradients in a linear gradient.

  • Horizontal gradients can be created by only using or varying the parameter values on the x-axis, in other words (x1, x2).



  • Vertical gradients can be created by only using or varying the parameter values on the y-axis, in other words (y1, y2).



  • Diagonal gradients can be created using or by varying both of the parameter values on the x-axis, in other words (x1, x2), as well as on the y-axis, in other words (y1, y2).

A Gradient can be used as a fill or stroke style property to the gradient object for drawing various shapes, like triangle, rectangle, circle and so on.

The following are examples based on linear gradient.

Example

  1. <html>  
  2.   <body>  
  3.     <canvas id="CanvasGradient" width="250" height="150" style="border:3px solid red;"></canvas>  
  4.     <script>  
  5.       var canvas = document.getElementById('CanvasGradient');  
  6.       var context = canvas.getContext('2d');  
  7.       context.rect(20, 20, 200, 100);  
  8. // add linear gradient  
  9.       var lgrd = context.createLinearGradient(0, 0, 200, 0);  
  10.       lgrd.addColorStop(1, 'blue');     
  11.       lgrd.addColorStop(0, 'orange');  
  12.       context.fillStyle = lgrd;  
  13.       context.fill();  
  14.     </script>  
  15.   </body>  
  16. </html>       

Another example of linear gradient includes both the fill and stroke styles.

Example

  1. <html>  
  2. <head>  
  3. <script>  
  4. function drawShape(){  
  5.   // get the canvas element using the DOM  
  6.   var canvas = document.getElementById('canvasGradient');  
  7.   
  8.   // Make sure we don't execute when canvas isn't supported  
  9.   if (canvas.getContext){  
  10.   
  11.     // use getContext to use the canvas for drawing  
  12.     var ctx = canvas.getContext('2d');  
  13.   
  14.     // Create Linear Gradients  
  15.     var lgrad1 = ctx.createLinearGradient(0,0,0,200);  
  16.     lgrad1.addColorStop(0, 'red');  
  17.     lgrad1.addColorStop(0.5, 'lightgreen');  
  18.     lgrad1.addColorStop(0.5, 'green');  
  19.     lgrad1.addColorStop(1, 'lightgreen');  
  20.   
  21.     var lgrad2 = ctx.createLinearGradient(0,50,0,100);  
  22.     lgrad2.addColorStop(0, 'black');  
  23.     lgrad2.addColorStop(0.5, 'red');  
  24.     lgrad2.addColorStop(1, 'black');  
  25.   
  26.     // assign gradients to fill and stroke styles  
  27.     ctx.fillStyle = lgrad1;  
  28.     ctx.strokeStyle = lgrad2;  
  29.     // draw shapes  
  30.     ctx.fillRect(10,10,150,150);  
  31.     ctx.strokeRect(100,50,100,50);  
  32.   } else {  
  33.     alert('Your browser does not support');  
  34.   }  
  35. }  
  36. </script>  
  37. </head>  
  38. <body onload="drawShape();">  
  39.    <canvas id="canvasGradient" style="border:3px solid black;"></canvas>  
  40. </body>  
  41. </html>  

Output

 
 
Extent of gradient

Understanding exactly what a gradient extent is, is considered to be important for all designers. Assume a gradient lies between or extends from x1 = 20 to x2 = 150, then only the graphics drawn with the x-values between 20 and 150 will have a gradient color applied to them. The graphics drawn outside the area are still affected by the gradient, but will be drawn using either the first or the last color of the gradient.

Here's an example explaining the concept.

Example

  1. <html>  
  2.   <body>  
  3.     <canvas id="CanvasGradient" width="500" height="300"></canvas>  
  4.     <script>  
  5.       var canvas = document.getElementById('CanvasGradient');  
  6.       var context = canvas.getContext('2d');  
  7.  // add linear gradient  
  8.       var lgrd = context.createLinearGradient(200, 0, 300, 0);  
  9.       lgrd.addColorStop(0, 'rgb(0, 0, 255)');  
  10.       lgrd.addColorStop(0.5, 'rgb(255, 0, 0)');  
  11.       lgrd.addColorStop(1, 'rgb(0, 255, 0)');  
  12.       context.fillStyle = lgrd;  
  13.       context.fillRect(20, 20, 80, 100);  
  14.       context.fillRect(50, 20, 150, 100);  
  15.       context.fillRect(180, 20, 250, 100);  
  16.       context.fillRect(230, 20, 300, 100);  
  17.       context.fillRect(260, 20, 340, 100);  
  18.     </script>  
  19.   </body>  
  20. </html>        

In the preceding example, the gradient extends from x1 = 200 and x2 = 300. The gradient color is set to grade from Blue to Red to Green. All the graphics with an x value less than 200 will be drawn with either only Blue or a combination of Blue and Red because the provided colors are three and it all depends on the values of x. All the graphics with an x value larger than 300 will be drawn either as only Green or a combination of Green and Red and it all depends on the values of x. Only graphics drawn with x values between 200 & 300 will have a gradient color, in other words a combination of all three colors.

Method: createRadialGradient(x1, y1, r1, x2, y2, r2)

Radial gradient can be initialized with the two specified circles, the starting circle and an ending circle in which the gradient proceeds with the starting circle and move towards an ending circle.

In other words, it can be defined as a color pattern that extends in a circular way, in other words from an inner color outwards to one or more other colors. It can be done using two circles, each having a center point and a radius. Once we created the circles, we can use the addStopColor() method to define new stops on the gradient with a specified offset value and various colors.

The parameters x1 & y1 are the coordinates of one circle, whereas x2 & y2 are the coordinates of another circle and r1 & r2 are the radii of the two circles that are the three arguments. This helps in representing the object in a radial gradient.

The following are examples of radial gradients.

Example

  1. <html>  
  2.   <head>  
  3.   </head>  
  4.   <body>  
  5.     <canvas id="CanvasGradient" width="220" height="220" style="border:3px solid red;"></canvas>  
  6.     <script>  
  7.       var canvas = document.getElementById('CanvasGradient');  
  8.       var context = canvas.getContext('2d');  
  9.       context.rect(10, 10, 200, 200);  
  10.   
  11.       // create radial gradient  
  12.       var rgrd = context.createRadialGradient(100, 100, 100, 100, 100, 0);  
  13.       rgrd.addColorStop(1, 'red');  
  14.       rgrd.addColorStop(0, 'yellow');  
  15.       context.fillStyle = rgrd;  
  16.       context.fill();  
  17.     </script>  
  18.   </body>  
  19. </html>        

Another example of radial gradient.

Example

  1. <html>  
  2.   <head>  
  3.   </head>  
  4.   <body>  
  5.     <canvas id="CanvasGradient" width="500" height="200" style="border:3px solid red;"></canvas>  
  6.     <script>  
  7.       var canvas = document.getElementById('CanvasGradient');  
  8.       var context = canvas.getContext('2d');  
  9.   
  10.        // create radial gradient  
  11.   
  12.       var rgrd1 = context.createRadialGradient(100, 100, 80, 100, 100, 0);  
  13.       rgrd1.addColorStop(1, 'white');  
  14.       rgrd1.addColorStop(0, 'black');  
  15.         
  16.       var rgrd2 = context.createRadialGradient(120, 110, 40, 200, 180, 150);  
  17.       rgrd2.addColorStop(0, 'red');  
  18.       rgrd2.addColorStop(1, 'blue');  
  19.         
  20.       var rgrd3 = context.createRadialGradient(50, 50, 80, 100, 100, 0);  
  21.       rgrd3.addColorStop(0, 'lightgreen');  
  22.       rgrd3.addColorStop(0.5, 'green');  
  23.       rgrd3.addColorStop(1, 'lightblue');  
  24.       context.fillStyle = rgrd1;  
  25.       context.fillRect(0, 0, 500, 200);  
  26.       context.fillStyle = rgrd2;  
  27.       context.fillRect(0, 0, 320, 200);  
  28.                context.fillStyle = rgrd3;  
  29.       context.fillRect(0, 0, 150, 200);  
  30.       context.fill();  
  31.     </script>  
  32.   </body>  
  33. </html>        

I hope you will like the effort and for any mistake feel free to let me know.

Thank you.
Keep learning and sharing.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs