HTML Canvas - createRadialGradient() Method

The HTML Canvas createRadialGradient() method of the CanvasRenderingContext2D interface can be used to create a radial gradient with the size and co-ordinates of two circles.

Syntax

Following is the syntax of HTML Canvas createRadialGradient() method −

CanvasRenderingContext2D.createRadialGradient(x, y, r, x1, y1, r1);

Parameters

Following is the list of parameters of this method −

S.No Parameter & Description
1

x

The x co-ordinate of the starting circle.
2

y

The y co-ordinate of the starting circle.
3

r

The radius of the start circle.
4

x1

The x co-ordinate of the end circle.
5

y1

The y co-ordinate of the end circle.
6

r1

The radius of the end circle.

Return value

A radial gradient is applied to the context object shape and is rendered to the Canvas element.

Example

The following example demonstrates radial gradient using two color stops by HTML Canvas createRadialGradient() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var radialgrad = context.createRadialGradient(25, 25, 25, 50, 50, 25);
      radialgrad.addColorStop(0.9, 'pink');
      radialgrad.addColorStop(0.85, 'grey');
      context.fillStyle = radialgrad;
      context.fillRect(10, 10, 200, 150);
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

HTML Canvas createPattern Method

Example

The following example uses three color-stops and apply radial gradient to the context object available inside the Canvas element. The object to which the style is applied is rendered on the Canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var radialgrad = context.createRadialGradient(25, 25, 50, 100, 80, 50);
      radialgrad.addColorStop(0, 'green');
      radialgrad.addColorStop(0.5, 'purple');
      radialgrad.addColorStop(1, 'cyan');
      context.fillStyle = radialgrad;
      context.fillRect(10, 10, 200, 150);
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

HTML Canvas createPattern Method
html_canvas_colors_and_styles.htm
Advertisements