# Introduction to Radial Gradients

## Introduction

This tutorial introduces the basic concepts required to generate radial gradients with HTML5 and JavaScript. This article explains how to create radial gradients with the 2D context method, `createRadialGradient()`. This tutorial demonstrates how to add color stops with method `addColorStop()`.

## Obtain a 2D Context

First declare an HTML5 `canvas` element on your Web page.

```<canvas
id="cv"
width="512"
height="512"
>

Your browser doesn't
support the canvas element.

</canvas>
```

Second retrieve a reference to the canvas 2D context. The following short listing demonstrates obtaining a two dimensional context from the HTML5 `canvas` element.

```canvas = document.getElementById(
'cv'
);
ctx = canvas.getContext(
'2d'
);
```

## Create a Radial Gradient

Third create a radial gradient with the 2D context's `createRadialGradient()` method. The parameters to `createRadialGradient()` define two circles. The first set of parameters define the inner circle and the second set of parameters define the outer circle. The inner circle is the starting circle for the gradient. The outer circle is the ending circle for the gradient. The first set of parameters declare the inner circle's radius, X and Y coordinates. The second set of parameters declare the outer circle's radius, X and Y coordinates. Declare each circle with a radius, and center point composed of X and Y coordinates. The following listing demonstrates creating a radial gradient.

```gradCircle =
ctx.createRadialGradient(
innerCircleX,
innerCircleY,
innerRadius,

outerCircleX,
outerCircleY,
outerRadius
);
```

## Color Stops

Add colors to the radial gradient with method `addColorStop()`. The `RadialGradient` class defines method `addColorStop()`. The parameters to `addColorStop()` include the position within the gradient for the color and the color itself.

Values range from 0 to 1 for the position parameter. Position 0 places the color at the origin of the circle. Position 1 places the color at the outer edge of the circle. For example position 0.5 places the color between the origin and the outer edge of the circle.

The following listing demonstrates creating a circle with red at the center and black along the perimeter. Colors gradually change from red to black within the circle.

```
gradCircle.addColorStop(
0,
"red"
);

gradCircle.addColorStop(
1,
"black"
);
```

You can declare radial gradient colors in a number of ways. Web safe color names, such as red, or blue, work fine. Acceptable color declaration syntax also includes hexadecimal colors such as #883900, rgb colors declared with rgb(0,0,255), and rgba colors declared with rgba(0,0,255,0.5). The last parameter in the rgba format represents alpha transparency. For example rgba(0,0,255,0.5) declares a 100% blue color. Yet the alpha value `0.5` allows 50% of the background to show through.

However hexadecimal color notation with alpha transparency is not acceptable. For example #88390088, generates an error. See the following JavaScript listing for examples which create acceptable color stops.

```gradCircle.addColorStop(
0,
"orange"
);

gradCircle.addColorStop(
0.25,
'rgb(0,0,255)'
);

gradCircle.addColorStop(
0.75,
'rgba(0,0,255,0.5)'
);

gradCircle.addColorStop(
1,
"#00ffff"
);
```

## Tips

Radial gradient colors with alpha transparency offer almost limitless possibilities. Try different circle positions, colors, stop positions, and alpha values, for a variety of effects. See the Radial Gradient Special Effects tutorial for more ideas.

Consider assigning a set of radial gradients with different alpha values per gradient. The following line of code adds a color stop for the perimeter of a radial gradient's circle. The color's blue, with 50% transparency or `0.5` alpha.

`this.gradient.addColorStop(1,rgba(0,0,255,0.5));`

Optionally assign one alpha setting for all gradients. The following line of code renders all colors with 60% opacity (40% transparency). For example render a solid red radial gradient over a white background. Forty percent of the white background shows through the red. Overlap multiple colors covering different areas for unique combinations.

`context.globalAlpha = 0.6;`

Consider global composite operations combined with global alpha. The following images demonstrate global composite operations with source over and xor with alpha settings `0.2` and `0.6`. Follow the image links. Select global composite operations from the drop down menu for animated examples. Input alpha settings between `1.0` and `0.1`.

## Summary

This tutorial introduced the basic concepts required to generate radial gradients with HTML5 and JavaScript. This article explained how to create radial gradients with method `createRadialGradient()`. This tutorial demonstrated how to add color stops with method `addColorStop()`.

#### Tags

Web developer, Web design, Website design, Web design company, Web programming Web development company, Website developers,webdev, how to design a Website, create a Website, Web application development, freelance Web developer, freelance Web designer, Web creator, developer Website, new Website design, Webpage development, Weebsite design company JavaScript, html5, Web development, Web programming, WebGL programming, Web projects, html 5, Web GL, Web design, Website developer, Web programming, design a Website, js, JavaScript code,JavaScripts, JavaScript help, css3, JavaScript program, css,
Copyright © 2015 Seven Thunder Software. All Rights Reserved.