CanvasRenderingContext2D: createConicGradient() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2023.
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
createConicGradient(startAngle, x, y)
Parameters
startAngle-
The angle at which to begin the gradient, in radians. The angle starts from a line going horizontally right from the center, and proceeds clockwise.
x-
The x-axis coordinate of the center of the gradient.
y-
The y-axis coordinate of the center of the gradient.
Return value
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" width="240" height="240"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Create a conic gradient
// The start angle is 0
// The center position is 100, 100
const 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
| Specification |
|---|
| HTML # dom-context-2d-createconicgradient-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
createConicGradient
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
See also
- The interface defining this method:
CanvasRenderingContext2D CanvasGradientCanvasRenderingContext2D.createLinearGradient()CanvasRenderingContext2D.createRadialGradient()