Search w3schools.com:

SHARE THIS PAGE

HTML canvas createRadialGradient() Method

HTML canvas Reference HTML Canvas Reference

Example

Draw a rectangle and fill with a radial/circular gradient:

YourbrowserdoesnotsupporttheHTML5canvastag.

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);

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

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, etc.

Tip: Use this object as the value to the strokeStyle or fillStyle properties.

Tip: Use the addColorStop() method to specify different colors, and where to position the colors in the gradient object.

JavaScript 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

HTML canvas Reference HTML Canvas Reference

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]