HTML5 Radial Gradient

The one of our readers asked me – what if generate a radial gradient with html5 instead of using ready images (for our’s color picker which we developed several days ago). And, I decided, why not? This is not so difficult, and it would be useful for everybody. The main idea is to separate a circle into multiple sectors, and – to fill these sectors with a radial color (which depends on an angle). After working for a while – I got the desired result – canvas-based radial gradient.

Live Demo

If you are ready – let’s start!


Step 1. HTML

As usual (for all canvas-based demos) we have a very basic html markup (with a single canvas object inside):

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <meta name="author" content="Script Tutorials" />
06         <title>HTML5 Radial Gradient | Script Tutorials</title>
07         <!-- add styles -->
08         <link href="css/main.css" rel="stylesheet" type="text/css" />
09         <!-- add script -->
10         <script src="js/script.js"></script>
11     </head>
12     <body>
13         <div class="container">
14             <canvas id="gradient" width="500" height="500" tabindex="1"></canvas>
15         </div>
16     </body>
17 </html>

Step 2. JS

Now, please create an empty ‘script.js’ file (inside ‘js’ folder) and put this code inside (this is full JS code of our HTML5 Radial Gradient script). I’ll explain the main functionality below this code.

js/script.js

01 // Get angle color function
02 function getAngleColor(angle) {
03     var color, d;
04     if (angle < Math.PI * 2 / 5) { // angle: 0-72
05         d = 255 / (Math.PI * 2 / 5) * angle;
06         color = '255,' + Math.round(d) + ',0'// color: 255,0,0 - 255,255,0
07     else if (angle < Math.PI * 4 / 5) { // angle: 72-144
08         d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5);
09         color = (255 - Math.round(d)) + ',255,0'// color: 255,255,0 - 0,255,0
10     else if (angle < Math.PI * 6 / 5) { // angle: 144-216
11         d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5);
12         color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255
13     else if (angle < Math.PI * 8 / 5) { // angle: 216-288
14         d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5);
15         color = '0,'+(255 - Math.round(d)) + ',255'// color: 0,255,255 - 0,0,255
16     else // angle: 288-360
17         d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5);
18         color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0
19     }
20     return color;
21 }
22 // inner variables
23 var iSectors = 360;
24 var iSectorAngle = (360 / iSectors) / 180 * Math.PI; // in radians
25 // Draw radial gradient function
26 function drawGradient() {
27     // prepare canvas and context objects
28     var canvas = document.getElementById('gradient');
29     var ctx = canvas.getContext('2d');
30     // clear canvas
31     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
32     // save current context
33     ctx.save();
34     // move to center
35     ctx.translate(canvas.width / 2, canvas.height / 2);
36     // draw all sectors
37     for (var i = 0; i < iSectors; i++) {
38         // start and end angles (in radians)
39         var startAngle = 0;
40         var endAngle = startAngle + iSectorAngle;
41         // radius for sectors
42         var radius = (canvas.width / 2) - 1;
43         // get angle color
44         var color = getAngleColor(iSectorAngle * i);
45         // draw a sector
46         ctx.beginPath();
47         ctx.moveTo(0, 0);
48         ctx.arc(0, 0, radius, startAngle, endAngle, false);
49         ctx.closePath();
50         // stroke a sector
51         ctx.strokeStyle = 'rgb('+color+')';
52         ctx.stroke();
53         // fill a sector
54         ctx.fillStyle = 'rgb('+color+')';
55         ctx.fill();
56         // rotate to the next sector
57         ctx.rotate(iSectorAngle);
58     }
59     // restore context
60     ctx.restore();
61 }
62 // initialization
63 if(window.attachEvent) {
64     window.attachEvent('onload', drawGradient);
65 else {
66     if(window.onload) {
67         var curronload = window.onload;
68         var newonload = function() {
69             curronload();
70             drawGradient();
71         };
72         window.onload = newonload;
73     else {
74         window.onload = drawGradient;
75     }
76 }

Once our window has loaded (onload event) we draw our radial gradient (drawGradient function). In the beginning we prepare canvas and context objects (as usual), after – more interesting: as I told, we are going to split whole circle (360 degrees) into sectors (I decided to use 360 sectors for more smooth gradient). In order to draw every sector we should jump to the center, draw an arc, and then – we need to fill this area (sector) with a certain color. To generate radial color we have to return a certain color depending on an angle. I defined ‘getAngleColor’ function for this purpose. Once we have drawn a sector – we draw next sector (until we finish with all of them to build whole radial circle).


Live Demo

[sociallocker]

download in package

[/sociallocker]


Conclusion

That’s all for today, we have just finished building own html5 radial gradient element. See you next time, good luck!