CanvasRenderingContext2D.createConicGradient()

The CanvasRenderingContext2D.createConicGradient() method of the Canvas 2D API creates a gradient around a point with given coordinates.

This method returns a conic CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties.

Note: Gradient coordinates are global, i.e., relative to the current coordinate space. When applied to a shape, the coordinates are NOT relative to the shape's coordinates.

Syntax

CanvasGradient ctx.createConicGradient(startAngle, x, y);

Parameters

startAngle

The angle at which to begin the gradient, in radians. Angle measurements start vertically above the centre and move around clockwise.

x

The x-axis coordinate of the centre of the gradient.

y

The y-axis coordinate of the centre of the gradient.

Return value

CanvasGradient

A conic CanvasGradient.

Examples

Filling a rectangle with a conic gradient

This example initializes a conic gradient using the createConicGradient() method. Five color stops between around the center coordinate are then created. Finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Create a conic gradient
// The start angle is 0
// The centre position is 100, 100
var gradient = ctx.createConicGradient(0, 100, 100);

// Add five color stops
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);

Rectangle result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
createConicGradient
86
No
90
86-90
No
No
No
No
86
90
86-90
No
No
No

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient