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 |
---|
HTML Standard # dom-context-2d-createradialgradient-dev |
Browser compatibility
BCD tables only load in the browser
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.createConicGradient()