createRadialGradient method
Returns an object that represents a radial or circular gradient to use in a canvas context.
![]() ![]() |
Syntax
var retval = CanvasRenderingContext2D.createRadialGradient(x0, y0, r0, x1, y1, r1);Parameters
- x0 [in]
-
Type: number
The x-coordinate of the starting circle of the gradient.
- y0 [in]
-
Type: number
The y-coordinate of the starting circle of the gradient.
- r0 [in]
-
Type: number
The radius of the starting circle.
- x1 [in]
-
Type: number
The x-coordinate of the ending circle of the gradient.
- y1 [in]
-
Type: number
The y-coordinate of the ending circle of the gradient.
- r1 [in]
-
Type: number
The radius of the ending circle.
Return value
Type: ICanvasGradient
A CanvasGradient object that represents the radial gradient.
Standards information
- HTML Canvas 2D Context, Section 5
Remarks
You can use radial gradients together with the fillText or fillRect method. The following illustration uses fillRect.

Examples
The following code example creates a rainbow-colored radial gradient. By using a mouse event, you can move it around the screen.
<html> <head> <title>Canvas Radial Gradient test </title> <style> canvas { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } </style> <script> function draw() { var canvas = document.getElementsByTagName('canvas')[0]; body = document.getElementsByTagName('body')[0]; if (canvas.getContext('2d')) { // Create the initial canvas and start the gradient. ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 600, 600); gradient = ctx.createRadialGradient(300, 300, 0, 300, 300, 300); ctx.fillStyle = getColors(gradient); ctx.fillRect(0, 0, 600, 600); body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / height; gradient = ctx.createRadialGradient(rx, ry, 0, rx, ry, 300); ctx.fillStyle = getColors(gradient); // Use the gradient for the fill style. ctx.fillStyle = gradient; ctx.fillRect(0, 0, 600, 600); }; } } function getColors(gradient) // Get the colors. Because they are used twice, get them when they are needed. { gradient.addColorStop("0", "magenta"); gradient.addColorStop(".25", "blue"); gradient.addColorStop(".50", "green"); gradient.addColorStop(".75", "yellow"); gradient.addColorStop("1.0", "red"); return (gradient); } </script> </head> <body onload="draw();"> <canvas height="600" width="600">This browser or document mode doesn't support canvas</canvas> </body> </html>
See also

