HTML5 Radial Gradient Source Code

Fire Rainbow Halo Fireball

Fireball Ball Explosion One Particle

Introduction

This page includes source code for rainbow, fire, donut torus, halo, and ball effects, web named colors, hexadecimal colors, rgb, and rgba with alpha transparency. Tap an image below to see related source code.

HTML

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

Your browser doesn't 
support the canvas element.

</canvas>

<div id="eDebug">
 Array of radial gradients 
 including 
 a fire effect, rainbow, 
 halo effect, ball, 
 and donut like torus rings.
</div>	
	

CSS

#eDebug{
 color:white;
}	

JavaScript

// The radius for each gradient:
var I_RAD = new Number(
 64
);
var canvas = null;
	
// The canvas 2d context:
var ctx = null;
	
// Radial gradient:
var gradCircle = null;
	
// HTML element for 
// debugging output:
var eDebug = null;	
	
// Number of gradients:
var I_POINT_COUNT = new Number(
 16
);
	
// Both X and Y coordinates
// for the center of each gradient.
var aXY = [
64,
192,
320,
448
];
		
/**
* function loadGame() is 
* called when the page loads.
* Obtains references to HTML elements.
* Calls drawGradients().
*/
function loadGame(){

canvas = document.getElementById(
 'cv'
);

ctx = canvas.getContext(
 '2d'
);

eDebug = document.getElementById(
 "eDebug"
);

drawGradients();		

}
	
/**
* function drawGradients()
* displays an array of 
* radial gradients
* to the canvas.
* Demonstrates modifications
* to each channel of color,
* the alpha channel,
* origin of the inner radius,
* hexadecimal, web named,
* and RGB decimal colors.
*/
function drawGradients(
 nX,
 nY
){
ctx.beginPath();
	
// nX and nY are the coordinates for
// the origin of the circle
// where the gradient will display.
// aXY is an Array with the width and
// height of the canvas divided evenly.
var nX = new Number(
 aXY[0]
);

var nY = new Number(
 aXY[0]
);

var k 	= new Number(0);	
var nW = new Number(I_RAD * 2);
var nH = new Number(I_RAD * 2);	

for (var i = 0; i < I_POINT_COUNT; i++){
 var j = i % 4;
 nX = aXY[j];
 if (j == 0){
  nY = aXY[k];
  k++;
 }		
 ...

Radial Gradient Basics

JavaScript: Explosion Particle

			
// x coordinate of starting circle. 
// y coordinate of starting circle.
// starting radius.
// x coordinate of ending circle.
// y coordinate of ending circle.
// ending radius.
switch(i){
case 0:
// Large particle useful 
// for explosion effects.
// Most basic gradient where the 
// origin of the circle,
// starts at red, and gradually changes to
// black as it reaches the 
// outside of the circle.
// I_RAD is the radius of the outer circle.
// 0 is radius of the inner circle.
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);

gradCircle.addColorStop(
 0,
 "red"
);

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

Add Color Stops

Fireball Effect

											
case 1:
// Bright sun or fireball effect.
// Demonstrates adding more color stops. 
// Use fractions of 1 to place 
// additional color stops.
// within the radius of the gradient.
// For example 1 displays at 
// the edge of the circle,
// 0 displays at the origin of the circle,
// 0.50 displays in between 
// the origin and the edge of the circle.
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);	
		
gradCircle.addColorStop(
 0,
 "yellow"
);

gradCircle.addColorStop(
 0.25, 
 "orange"
);
				
gradCircle.addColorStop(
 0.75, 
 "red"
);

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

case 2:
// Small particle useful for explosions.
// Demonstrates change of outer radius to 32.
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 32
);		
	
gradCircle.addColorStop(
 0,
 "red"
);

gradCircle.addColorStop(
 1,
 "black"
);					
break;
				
case 3:			
// Soft light blue circle.
// Demonstrates use of RGB colors,
// where the red,green, and blue components
// are represented with colors from 0 to 255.
// In this example for color stop 0:
// red = 0, green = 0, and blue = 255.
// Therefore the origin of the circle is blue.				
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);	
		
gradCircle.addColorStop(
 0,
 'rgb(0,0,255)'
);

gradCircle.addColorStop(
 1,
 'rgb(0,0,0)'
);					
break;
			
case 4:
// Soft dark blue circle.
// Demonstrates use of alpha RGBA.
// The last parameter to RGBA is 
// the alpha value, transparency.
// Therefore blue displays at 50% opacity.
// Black displays at 100% opacity.
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);	
		
gradCircle.addColorStop(
 0,
 'rgba(0,0,255,0.5)'
);

gradCircle.addColorStop(
 1,
 'rgba(0,0,0,1.0)'
);					
break;
				
case 5:
// Blue semi filled in torus donut.
// Demonstrates use of alpha RGBA, 
// with more color stops.
// The last parameter to RGBA is 
// the alpha value, transparency.
// Therefore blue displays at 40%, 
// then 80% opacity.
// Outer and inner black 
// display at 100% opacity.
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);	
		
gradCircle.addColorStop(
 0,
 'rgba(0,0,0,1.0)'
);

gradCircle.addColorStop(
 0.4,
 'rgba(0,0,255,0.4)'
);

gradCircle.addColorStop(
 0.6,
 'rgba(0,0,255,0.8)'
);

gradCircle.addColorStop(
 1,
 'rgba(0,0,0,1.0)'
);					
break;
				
case 6:			
// Soft edges blue green rings.
// Demonstrates varying hexadecimal 
// color stops.
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);
			
gradCircle.addColorStop(
 0,
 "#00ffff"
);

gradCircle.addColorStop(
 0.5,
 "#0044ff"
);

gradCircle.addColorStop(
 1,
 "black"
);					
break;				
				
case 7:
// Soft edges violet rings
// Demonstrates use of colors 
// defined in hexadecimal format.
// See the hexadecimal color tutorial for details.
// Hexadecimal with alpha 
// is not accepted:  #ff00ff88 
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);	
		
gradCircle.addColorStop(
 0,
 "#ff00ff"
);

gradCircle.addColorStop(
 1,
 "black"
);

nIncrementY = I_RAD * 2;					
break;		

Fire Effects

			
case 8:
// Fire effect			
gradCircle = ctx.createRadialGradient(
 nX,
 nY+60,
 0,
 nX,
 nY,
 I_RAD
);			

gradCircle.addColorStop(
 0,
 "black"
);

gradCircle.addColorStop(
 0.15,
 "#0e005d"
);

gradCircle.addColorStop(
 0.30, 
 "#930000"
);

gradCircle.addColorStop(
 0.5,
 "#fe7b07"
);

gradCircle.addColorStop(
 0.65, 
 "orange"
);
				
gradCircle.addColorStop(
 0.8, 
 "red"
);

gradCircle.addColorStop(
 0.90,
 "rgba(255,0,0,0.6)"
);

gradCircle.addColorStop(
 1,
 "black"
);
break;
		
case 9:			
// Fire effect with alpha transparency.
// Move the origin down 60 pixels.			
gradCircle = ctx.createRadialGradient(
 nX,
 nY+60,
 0,
 nX,
 nY,
 I_RAD
);	
		
gradCircle.addColorStop(
 0,
 "black"
);

gradCircle.addColorStop(
 0.15,
 'rgba(14,0,93,0.7)'
);

gradCircle.addColorStop(
 0.30, 
 'rgba(147,0,0,0.7)'
);

gradCircle.addColorStop(
 0.5,
 'rgba(254,123,7,0.8)'
);

gradCircle.addColorStop(
 0.65, 
 'rgba(255,165,0,0.4)'
);
				
gradCircle.addColorStop(
 0.8, 
 'rgba(255,0,0,0.2)'
);
				
gradCircle.addColorStop(
 0.9,
 "rgba(64,0,0,0.5)"
);

gradCircle.addColorStop(
 1,
 "rgba(0,0,0,1)"
);				
break;		

Donut or Torus

			
case 10:
// Red Donut or torus effect						
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);		
	
gradCircle.addColorStop(
 0,
 "black"
);

gradCircle.addColorStop(
 0.25, 
 "black"
);		
							
gradCircle.addColorStop(
 0.6,
 "black"
);

gradCircle.addColorStop(
 0.75, 
 "#ff1e07"
);	
			
gradCircle.addColorStop(
 0.9,
 'rgb(16,0,0)'
);

gradCircle.addColorStop(
 1,
 "black"
);
break;
				
case 11:
// Blue Donut Effect		
// Wider revolving circle,
// than the red donut.				
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);	
		
gradCircle.addColorStop(
 0,
 "black"
);

gradCircle.addColorStop(
 0.25, 
 "black"
);	
								
gradCircle.addColorStop(
 0.5,
 "black"
);

gradCircle.addColorStop(
 0.75, 
 "#0e36ff"
);	
			
gradCircle.addColorStop(
 0.9,
 'rgb(0,0,16)'
);

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

Rainbow Effect

			
case 12:	
// Rainbow		
// Move the inner radius down 30 pixels.			
gradCircle = ctx.createRadialGradient(
 nX,
 nY+30,
 0,
 nX,
 nY,
 I_RAD
);	
		
gradCircle.addColorStop(
 0,
 "black"
);

gradCircle.addColorStop(
 0.15,
 "#fe00fe"
);

gradCircle.addColorStop(
 0.30,
 "#0001fc"
);

gradCircle.addColorStop(
 0.40,
 "#00fefe"
);

gradCircle.addColorStop(
 0.50,
 "#01ff00"
);

gradCircle.addColorStop(
 0.65,
 "#fdfe00"
);

gradCircle.addColorStop(
 0.80,
 "#ff0101"
);

gradCircle.addColorStop(
 1,
 "black"
);
// Crop the height.
nH = I_RAD * 1.2;
break;

Green Ball

			
case 13:
// Green ball. 
// Move the inner radius up 32 pixels,
// and to the left 16 pixels,
// to simulate a  highlight.			
gradCircle = ctx.createRadialGradient(
 nX-16,
 nY-32,
 0,
 nX,
 nY,
 I_RAD
);
			
gradCircle.addColorStop(
 0,
 "#f0fff0"
);

gradCircle.addColorStop(
 0.2,
 "#00ff00"
);			
					
gradCircle.addColorStop(
 0.8,
 "#006e00"
);

gradCircle.addColorStop(
 0.9,
 "#005600"
);	
			
gradCircle.addColorStop(
 1,
 "black"
);

nH = I_RAD * 2;					
break;				 

Halo Effect

			
case 14:
// Blue Halo Effect						
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);		
	
gradCircle.addColorStop(
 0,
 "black"
);

gradCircle.addColorStop(
 0.1,
 'rgb(0,0,16)'
);

gradCircle.addColorStop(
 0.6, 
 "#0e36ff"
);		
		
gradCircle.addColorStop(
 0.9,
 'rgb(0,0,16)'
);

gradCircle.addColorStop(
 1,
 "black"
);
break;
			
case 15:
// White Halo Effect
// with softer edges.
gradCircle = ctx.createRadialGradient(
 nX,
 nY,
 0,
 nX,
 nY,
 I_RAD
);			

gradCircle.addColorStop(
 0,
 "black"
);

gradCircle.addColorStop(
 0.1,
 'rgb(16,16,16)'
);

gradCircle.addColorStop(
 0.4,
 'rgb(128,128,128)'
);	

gradCircle.addColorStop(
 0.6, 
 "#ffffff"
);	
			
gradCircle.addColorStop(
 0.9,
 'rgb(32,32,32)'
);

gradCircle.addColorStop(
 1,
 "black"
);
break;
						
}
		
ctx.fillStyle = gradCircle;
// Filling a Rectangle 
// with the top left corner,
// offset by the radius.
ctx.fillRect(
 nX-I_RAD,
 nY-I_RAD, 
 nW, 
 nH
);		
	
ctx.fill();							
}
		
}

Web Development Company

Seven Thunder Software's Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL and Python 3. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.

Tags