Canvas createRadialGradient() Method
Example
Draw a rectangle filled with a radial/circular gradient:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create Radial
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Draw a filled Rectangle
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 100);
Try it Yourself »
Description
The createRadialGradient() method creates a radial/circular gradient object.
The gradient object can be used to fill rectangles, circles, lines, text, etc.
The gradient object can be used as value to strokeStyle or fillStyle properties.
Note
You must add a color stop to a gradient object to make the gradient visible.
See Also:
The createLinearGradient() Method (Create gradiant object)
The addColorStop() Method (Add gradiant stop point)
The fillStyle Property (Set fill color/style)
The strokeStyle Property (Set stroke color/style)
Syntax
| context.createRadialGradient(x0, y0, r0, x1, y1, r1) |
Parameter Values
| Parameter | Description |
|---|---|
| x0 | The x-coordinate of the starting circle of the gradient |
| y0 | The y-coordinate of the starting circle of the gradient |
| r0 | The radius of the starting circle |
| x1 | The x-coordinate of the ending circle of the gradient |
| y1 | The y-coordinate of the ending circle of the gradient |
| r1 | The radius of the ending circle |
Return Value
| context.createRadialGradient(x0, y0, r0, x1, y1, r1) |
Browser Support
The <canvas> element is an HTML5 standard (2014).
createRadialGradient() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
