HTML Canvas - createConicGradient() Method

The HTML Canvas createConicGradient() method can be used to create a gradient around the point for the given co-ordinates.

Syntax

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

CanvasRenderingContext2D.createConicGradient(angle, x, y);

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	angle The angle at which gradient is to be drawn on the Canvas shape. The passed angle is based on clockwise rotation only.
2	x The x co-ordinate of the gradient center.
3	y The y co-ordinate of the gradient center.

S.No

Parameter & Description

angle

The angle at which gradient is to be drawn on the Canvas shape. The passed angle is based on clockwise rotation only.

The x co-ordinate of the gradient center.

The y co-ordinate of the gradient center.

Return value

Conic gradient is applied to the context inside the Canvas element and is rendered.

Example 1

The following gradient draws a simple conic gradient to the rectangle drawn inside the Canvas element using HTML Canvas createConicGradient() 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 congradient = context.createConicGradient(45, 95, 95);
      congradient.addColorStop(0, 'blue');
      congradient.addColorStop(0.75, 'brown');
      context.fillStyle = congradient;
      context.fillRect(25, 25, 200, 150);
   </script>
</body>
</html>

Output

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

Example 2

The following example draws a conic gradient pattern onto the Canvas element by calling the method createConicGradient().

<!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 congradient = context.createConicGradient(60, 130, 100);
      congradient.addColorStop(0.05, 'violet');
      congradient.addColorStop(0.25, 'blue');
      congradient.addColorStop(0.55, 'green');
      congradient.addColorStop(0.85, 'yellow');
      context.fillStyle = congradient;
      context.fillRect(25, 25, 200, 150);
   </script>
</body>
</html>

Output

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

html_canvas_colors_and_styles.htm