The CanvasRenderingContext2D
.createRadialGradient()
method of the Canvas 2D API creates a radial gradient using the size and coordinates of two circles.
This method returns a 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.createRadialGradient(x0, y0, r0, x1, y1, r1);
The createRadialGradient()
method is specified by six parameters, three defining the gradient's start circle, and three defining the end circle.
Parameters
x0
- The x-axis coordinate of the start circle.
y0
- The y-axis coordinate of the start circle.
r0
- The radius of the start circle. Must be non-negative and finite.
x1
- The x-axis coordinate of the end circle.
y1
- The y-axis coordinate of the end circle.
r1
- The radius of the end circle. Must be non-negative and finite.
Return value
CanvasGradient
- A radial
CanvasGradient
initialized with the two specified circles.
Examples
Filling a rectangle with a radial gradient
This example initializes a radial gradient using the createRadialGradient()
method. Three color stops between the gradient's two circles are then created. Finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle.
HTML
<canvas id="canvas" width="200" height="200"></canvas>
JavaScript
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Create a radial gradient // The inner circle is at x=110, y=90, with radius=30 // The outer circle is at x=100, y=100, with radius=70 var gradient = ctx.createRadialGradient(110,90,30, 100,100,70); // Add three color stops gradient.addColorStop(0, 'pink'); gradient.addColorStop(.9, 'white'); gradient.addColorStop(1, 'green'); // Set the fill style and draw a rectangle ctx.fillStyle = gradient; ctx.fillRect(20, 20, 160, 160);
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.createRadialGradient' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
createRadialGradient | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1.5 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
Gecko-specific notes
- Starting with Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), specifying non-finite values now throws
NOT_SUPPORTED_ERR
instead ofSYNTAX_ERR
. - Starting with Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), specifying a negative radius correctly throws
INDEX_SIZE_ERR
.
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.createLinearGradient()