CanvasRenderingContext2D: createRadialGradient() method

createRadialGradient(x0, y0, r0, x1, y1, r1)

The createRadialGradient() method is specified by six parameters, three defining the gradient's start circle, and three defining the end circle.

x0

The x-axis coordinate of the start circle.

y0

The y-axis coordinate of the start circle.

r0

The radius of the start circle. Must be non-negative and finite.

x1

The x-axis coordinate of the end circle.

y1

The y-axis coordinate of the end circle.

r1

The radius of the end circle. Must be non-negative and finite.

A radial CanvasGradient initialized with the two specified circles.

NotSupportedError DOMException

Thrown when non-finite values are passed in parameter.

IndexSizeError DOMException

Thrown when a negative radius is passed in parameter.

This example initializes a radial gradient using the createRadialGradient() method. Three color stops between the gradient's two circles are then created. Finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle.

HTML

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// Add three color stops
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);

Result

• The interface defining this method: CanvasRenderingContext2D
• CanvasRenderingContext2D.createLinearGradient()
• CanvasRenderingContext2D.createConicGradient()