Web/API/CanvasRenderingContext2D/createRadialGradient
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 StandardThe definition of 'CanvasRenderingContext2D.createRadialGradient' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
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()
CanvasRenderingContext2D.createRadialGradient() by Mozilla Contributors is licensed under CC-BY-SA 2.5.