How to use HTML5 Canvas Radial Gradient

This article describe about HTML5 Canvas Radial Gradient.
  • 2291

HTML5 Canvas Radial Gradient

For createRadialGradient() method we can create a radial gradient with Canvas. It is defined with two imaginary circle one is starting circle and other is ending circle.

Syntax

<script>
  var grad=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
  grad.addColorStop(offset, color);
</script>


Example

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

      #myCanvas {

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function () {

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

 

            context.beginPath();

            context.moveTo(170, 80);

            context.bezierCurveTo(140, 100, 140, 150, 230, 150);

            context.bezierCurveTo(250, 180, 320, 180, 340, 150);

            context.bezierCurveTo(420, 150, 420, 130, 390, 100);

            context.bezierCurveTo(430, 40, 370, 30, 340, 50);

            context.bezierCurveTo(320, 7, 240, 20, 220, 50);

            context.bezierCurveTo(200, 5, 150, 20, 170, 80);

            context.closePath();

            var grad = context.createRadialGradient(238, 50, 10, 238, 50, 200);

            grad.addColorStop(0, "yellow");

            grad.addColorStop(1, "brown");

            context.fillStyle = grad;

            context.fill();

            context.lineWidth = 5;

            context.strokeStyle = "red";

            context.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

  </body>

</html>


Output

Html5 radiar gradient convas pic2.jpg

Further Readings

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.