---

Search posts under HTML5:

---

Canvas Gradients in HTML5

How to create the canvas gradients in HTML5?

Gradients

Canvas gradients are the colors that can be used to fill or stroke of shapes, instead of solid colors, Gradient is a color which changes from one color to another color.

There are two types of gradinets they are

• Linear gradient(x1, y1, x2, y2)- It is used to change the color linearly in horizontal, vertical and diagonal shape
• Radial gradient(x1, y1, r1, x2, y2, r2) - It is used to create the circular patterns and radial gradients

<canvas id="Canvas" width="300" height="250" style ="border:5px solid orange;"></canvas>
    <script>
        var canvas = document.getElementById('Canvas');
        var context = canvas.getContext('2d');

        context.rect(10, 10, 200, 150);

        var linear = context.createLinearGradient(0, 0, 200, 150);
        linear.addColorStop(0, 'orange');
        linear.addColorStop(1, 'blue');

        context.fillStyle = linear;
        context.fill();
    </script>

In the above code snippet we have defined the linear gradient with two colors we have canvas element as with the width of 300 and height of 250 and id as "canvas". 

• context.rect as (x,y, width, height) -defines the values as (10, 10, 200, 100)
• var linear = context.createLinearGradient(0, 0, 200, 150); - defines the value of linear gradient rectangle values 
• linear.addcolorstop(0, orange ) - defines the orange color with starting at x position and linear.addcolorstop(1, blue) - defines the color as y position with the blue color
• context.fillstyle linear defines the linear gradient  

 <canvas id="Canvas" width="400" height="300" style="border:2px solid green"></canvas>
    <script>
        var canvas = document.getElementById('Canvas');
        var context = canvas.getContext('2d');
        context.rect(10, 10, 300, 250);

        var linear = context.createLinearGradient(60, 20, 100, 250);


        linear.addColorStop(0, 'black');
        linear.addColorStop(0.3, 'lime');
        linear.addColorStop(0.6, 'red');
        linear.addColorStop(1, 'blue');

        context.fillStyle = linear;
        context.fill();
    </script>

 <canvas id="Canvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('Canvas');
        var context = canvas.getContext('2d');

        
        context.rect(0, 0, 600, 250);

        
        var radial = context.createRadialGradient(100, 100, 50, 100, 100, 100);

        radial.addColorStop(1, 'pink'); 

        radial.addColorStop(0, 'yellow'); 

        radial.addColorStop(1, 'green');

        context.fillStyle = radial;
        context.fill();
    </script>

• context.rect(0, 0, 600, 250); - It defines the rectangle
• var radial = context.createRadialGradient(100, 100, 50, 100, 100, 100); - It defines the radialgradient with values as (x1, y1, r1) and (x2, y2,r2).
• radial.addColorStop(1, 'pink'); - It defines the color with pink
• radial.addColorStop(0, 'yellow'); - It defines the color with yellow
• radial.addColorStop(1, 'green'); - It defines the color with green

 <canvas id="Canvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('Canvas');
        var context = canvas.getContext('2d');


        context.rect(0, 0, 600, 250);
        var radial = context.createRadialGradient(100, 100, 50, 100, 100, 100);

        radial.addColorStop(1, 'yellow');

        radial.addColorStop(0, 'red');

        radial.addColorStop(0.3, 'blue');

        context.fillStyle = radial;
        context.fill();
    </script>

Circular radial pattern

• context.rect(0, 0, 600, 250); - It defines the rectangle
• var radial = context.createRadialGradient(100, 100, 50, 100, 100, 100); - It defines the radialgradient with values as (x1, y1, r1) and (x2, y2,r2).
• radial.addColorStop(1, 'pink'); - It defines the color with pink
• radial.addColorStop(0, 'yellow'); - It defines the color with yellow
• radial.addColorStop(1, 'green'); - It defines the color with green

output

Gradient text

Gradient text is used to add the color to the text

<canvas id="myCanvas" width="300" height="300"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');

        ctx.shadowColor = "rgb(29, 289, 10)";
        ctx.shadowOffsetX = 20;
        ctx.shadowOffsetY = 20
        ctx.shadowBlur = 10;
        ctx.font = "50px arial";

        var gradient = ctx.createLinearGradient(0, 0, 150, 100);
        gradient.addColorStop(1, "rgb(255, 10, 18)");
        gradient.addColorStop(0, "rgb(55, 53, 151)");
        ctx.fillStyle = gradient;
        ctx.fillText("TechFunda", 10, 50);
    </script>

GradientText

In the above code snippet we have defined the gradient text which is used to add the color to the text we have defined the shadow of the text with the color and setting the positions of the shadow text in the canvas with id as mycanvas and with as "300" and height as "300"

• var canvas = document.getElementById("myCanvas"); - we are declaring the canvas to document.getElementById("mycanvas");
• var context=canvas.Getcontext.("2d")
• ctx.shadowColor = "rgb(29, 289, 10)"; - It defines the shadow text color 
• ctx.shadowOffsetX = 20; - It defines the shadow text x position of the canvas
• ctx.shadowOffsetY = 20 - It defines the shadpw text y position of the canvas
• ctx.shadowBlur = 10; - It defines the shadow to be blur 
• ctx.font = "50px arial"; - It defines the fontsize of the text to be 50
• var gradient = ctx.createLinearGradient(0, 0, 150, 100); - It defines the linear gradient with (x, y width, height)
• gradient.addColorStop(1, "rgb(255, 10, 18)"); - It defines the color of the text
• ctx.fillStyle = gradient; - it defines to fill the text with gradient
• ctx.filltext= ("TechFunda, 10, 50);

output