HTML5 Canvas Reference - createRadialGradient()

A radial gradient takes six parameters to initialize, and it uses the same color stop idea from linear gradient to create the color changes.

The createRadialGradient() method creates a circular gradient object.

After creating the gradient object we can assign this object to the strokeStyle or fillStyle properties.

Like the linear gradient we can use the addColorStop() method to add different colors, and position the colors in the gradient object.

Browser compatibility


`createRadialGradient()`	Yes	Yes	Yes	Yes	Yes

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

The six parameters are used to define the center point and the radius of two circles.

The first circle is the "start" circle, and the second circle is the "end" circle. Let's look at an example:

var gr = context.createRadialGradient(50,50,25,50,50,100);

The first circle has a center point of 50,50 and a radius of 25; the second has a center point of 50,50 and a radius of 100.

We set color stops the same way we did with the linear gradients:

gr.addColorStop(0,'rgb(255,0,0)'); 
gr.addColorStop(.5,'rgb(0,255,0)'); 
gr.addColorStop(1,'rgb(255,0,0)');

Example

The following code shows how to use createRadialGradient from canvas context.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from   w  w w .j av a2 s  .co m-->
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    var radgrad = ctx.createRadialGradient(100,100,20,100,100,50);
    radgrad.addColorStop(0, 'red');  
    radgrad.addColorStop(0.3, 'yellow');  
    radgrad.addColorStop(1, 'blue');

    ctx.fillStyle = radgrad;  
    ctx.fillRect(50,50,150,150); 


</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to draw a ball with Radial Gradient.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
<!--   ww  w.ja v a2 s.  c  o m-->
    function circle(x, y, r, c) {
        ctx.beginPath();
        var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
        rad.addColorStop(0, 'rgba('+c+',1)');
        rad.addColorStop(1, 'rgba('+c+',0)');
        ctx.fillStyle = rad;
        ctx.arc(x, y, r, 0, Math.PI*2, false);
        ctx.fill();
    }
    circle(128, 128, 200, '255,0,0');
    circle(64, 64, 30,    '0,255,0');
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to draw a ring with gradient color.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
<!-- w  w w . jav a  2 s.c o m-->
    var radgrad = ctx.createRadialGradient(60, 60, 0, 60, 60, 60);
    radgrad.addColorStop(0.8, 'rgba(255,0,0,0)');
    radgrad.addColorStop(0.85,'rgba(255,0,0,.6)');
    radgrad.addColorStop(0.9, 'rgba(255,0,0,1)');
    radgrad.addColorStop(0.95,'rgba(255,0,0,.6)');
    radgrad.addColorStop(1,   'rgba(255,0,0,0)');
   
    ctx.fillStyle = radgrad;
    ctx.arc(60, 60, 60, 0, 2 * Math.PI, true);
    ctx.fill();
</script>
</body>
</html>

The code above is rendered as follows: