HTML canvas createRadialGradient()Method
Examples
Draw a rectangle and fill it with a radial/circular gradient:
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Try it Yourself »
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the createRadialGradient() method.
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
Definition and Usage
The createRadialGradient() method creates a radial/circular gradient object.
The gradient can be used to fill rectangles, circles, lines, text, and so on.
Tip:Please use this object as the value of thestrokeStyleorfillStyleproperty's value.
Tip:Please use theaddColorStop()method to specify different colors and where the colors are positioned in the gradient object.
| JavaScript Syntax: | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
Parameter Values
| Parameter | Description |
|---|---|
| x0 | The x-coordinate of the start circle of the gradient |
| y0 | The y-coordinate of the start circle of the gradient |
| r0 | The radius of the start circle |
| x1 | The x-coordinate of the end circle of the gradient |
| y1 | The y-coordinate of the end circle of the gradient |
| r1 | The radius of the end circle |
HTML canvas Reference Other Extensions