Tutorials References Menu

HTML canvas createRadialGradient() Method

❮ 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

The numbers in the table specify the first browser version that fully supports the method.

Method
createRadialGradient() Yes 9.0 Yes Yes Yes

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