Creating 2-D Animations on Canvas - interactive colour ball

In this tutorial, you will learn the following:

  • How to create any colour using the three primary colours - red, blue and green.
  • How to make 16-million colours using a value between 0 and 255 for each primary colour.
Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:

Interactive Colour Ball

The animation allows you to use the three primary colours - red, gree and blue - to produce any other colour that you can think of.

In theory, it can produce 16-million colours, depending on the values of red, green and blue.

Red:        0   255

Green:  0   255

Blue:     0   255


The range element may not work with Mozilla Firefox.

The Code for Interactive Colour Ball

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radr;var radg;var radb;
function fun() {
// red value;
// green value;
// blue value;
// rgb value for fillStyle
var col='rgb('+radr+','+radg+','+radb+')';
// colour circle


All Canvas Animations