이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

createRadialGradient method

Returns an object that represents a radial or circular gradient to use in a canvas context.

HTML Canvas 2D Context, Section 5Internet Explorer 9


var retval = CanvasRenderingContext2D.createRadialGradient(x0, y0, r0, x1, y1, r1);


x0 [in]

Type: number

The x-coordinate of the starting circle of the gradient.

y0 [in]

Type: number

The y-coordinate of the starting circle of the gradient.

r0 [in]

Type: number

The radius of the starting circle.

x1 [in]

Type: number

The x-coordinate of the ending circle of the gradient.

y1 [in]

Type: number

The y-coordinate of the ending circle of the gradient.

r1 [in]

Type: number

The radius of the ending circle.

Return value

Type: ICanvasGradient

A CanvasGradient object that represents the radial gradient.

Standards information


You can use radial gradients together with the fillText or fillRect method. The following illustration uses fillRect.

Illustration of the radial gradient object example


The following code example creates a rainbow-colored radial gradient. By using a mouse event, you can move it around the screen.

  <title>Canvas Radial Gradient test </title>
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    function draw() {
        var canvas = document.getElementsByTagName('canvas')[0];
        body = document.getElementsByTagName('body')[0];
        if (canvas.getContext('2d')) {
            // Create the initial canvas and start the gradient.
            ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 600, 600);
            gradient = ctx.createRadialGradient(300, 300, 0, 300, 300, 300);
            ctx.fillStyle = getColors(gradient);
            ctx.fillRect(0, 0, 600, 600);
            body.onmousemove = function (event) {
                var width = window.innerWidth,
                    height = window.innerHeight,
                    x = event.clientX,
                    y = event.clientY,
                    rx = 600 * x / width,
                    ry = 600 * y / height;

                gradient = ctx.createRadialGradient(rx, ry, 0, rx, ry, 300);
                ctx.fillStyle = getColors(gradient);            // Use the gradient for the fill style.
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, 600, 600);
    function getColors(gradient)  // Get the colors. Because they are used twice, get them when they are needed.
        gradient.addColorStop("0", "magenta");
        gradient.addColorStop(".25", "blue");
        gradient.addColorStop(".50", "green");
        gradient.addColorStop(".75", "yellow");
        gradient.addColorStop("1.0", "red");
        return (gradient);

  <body onload="draw();">
    <canvas height="600" width="600">This browser or document mode doesn't support canvas</canvas>

See also




© 2014 Microsoft