How to change the colour of each circle in html 5?

Question

Here is the code for the html5. I got this from my lecturer. He gave this as a sample. The problem is, how to change the colour of each circle? Please help me. I need to present my work by tomorrow. Thanks.

HTML5 code

<!DOCTYPE html>
<html>
<head><title>DATA VISUALIZATION</title></head>
<body>
<h1>UMP Online Learning Behavior Visualization Based On Moodle Logs.</h1>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas2" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas3" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas4" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas5" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> 
<canvas id="myCanvas6" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas7" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" src="molecule1.js"></script>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("MONDAY",10,50);
var a = c.width/2;
var b = c.height/2;
var data = new Array();
for (i=0;i<9;i++)
data[i] = Math.floor((Math.random()*10)+1)*10;
createMolecule(data, a, b);

c=document.getElementById("myCanvas2");
ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("TUESDAY",10,50);
a = c.width/2;
b = c.height/2;
createMolecule(data, a, b);


c=document.getElementById("myCanvas3");
ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("WEDNESDAY",10,50);
a = c.width/2;
b = c.height/2;
createMolecule(data, a, b);


c=document.getElementById("myCanvas4");
ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("THURSDAY",10,50);
a = c.width/2;
b = c.height/2;
createMolecule(data, a, b);

c=document.getElementById("myCanvas5");
ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("FRIDAY",10,50);
a = c.width/2;
b = c.height/2;
createMolecule(data, a, b);

c=document.getElementById("myCanvas6");
ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("SATURDAY",10,50);
a = c.width/2;
b = c.height/2;
createMolecule(data, a, b);

c=document.getElementById("myCanvas7");
ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("SUNDAY",10,50);
a = c.width/2;
b = c.height/2;
createMolecule(data, a, b);

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

Js code

function createMolecule(data, a, b)
 {
var n = data.length;
var degree = (2*(Math.PI))/n;
//alert(degree);
var temp;
var tempX = new Array();
var tempY = new Array();

ctx.fillStyle="#DC143C";
for (i=0;i<n;i++)
{
temp = degree*(i+1);
ctx.moveTo(a,b);
x = a + 2*Math.cos(temp)*data[i];
y = b + 2*Math.sin(temp)*data[i];
ctx.lineTo(x,y);
ctx.lineWidth=2;
ctx.strokeStyle="#696969";
ctx.stroke();

tempX[i] = x;
tempY[i] = y;

ctx.moveTo(tempX[i],tempY[i]);

ctx.arc(tempX[i],tempY[i],data[i]/2,0,Math.PI*2,true);
ctx.stroke();
ctx.fill();
}


//draw centre circle
ctx.fillStyle="#FFFF00";
ctx.arc(a,b,10,0,Math.PI*2,true);
ctx.stroke();
ctx.fill();


for (i=0;i<n;i++)
{

ctx.fillStyle="#000000";
ctx.font="10px Arial";
ctx.fillText(data[i],tempX[i],tempY[i]);

}

}// end of function

score 0 · Answer 1 · 2013-06-01T04:13:18.600

0

You can change the color of a circle under ctx.fillStyle in your JavaScript. Set ctx.fillStyle to a string with the desired color's hex code (or you can use a common color, RGB or RGBA)

edited Jun 01 '13 at 04:13

answered Jun 01 '13 at 03:44

1

In fact if you use `ctx.fillStyle = rgba(red,green,blue,alpha)` you can dial up any color and transparency. Good luck. – Floris Jun 01 '13 at 03:56

score 0 · Accepted Answer · edited May 23 '17 at 12:00

You're missing beginPath() and closePath().

Try this:

function createMolecule(data, a, b) {
    var n = data.length;
    var degree = (2 * (Math.PI)) / n;
    //alert(degree);
    var temp;
    var tempX = new Array();
    var tempY = new Array();

    ctx.fillStyle = "#DC143C";
    for (i = 0; i < n; i++) {

        ctx.beginPath();

        temp = degree * (i + 1);
        ctx.moveTo(a, b);
        x = a + 2 * Math.cos(temp) * data[i];
        y = b + 2 * Math.sin(temp) * data[i];
        ctx.lineTo(x, y);
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#696969";
        ctx.stroke();

        tempX[i] = x;
        tempY[i] = y;

        ctx.moveTo(tempX[i], tempY[i]);

        ctx.fillStyle = get_random_color();

        ctx.arc(tempX[i], tempY[i], data[i] / 2, 0, Math.PI * 2, true);
        ctx.stroke();
        ctx.fill();

        ctx.closePath();

    }


    //draw centre circle
    ctx.fillStyle = "#FFFF00";
    ctx.arc(a, b, 10, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.fill();

    for (i = 0; i < n; i++) {

        ctx.fillStyle = "#000000";
        ctx.font = "10px Arial";
        ctx.fillText(data[i], tempX[i], tempY[i]);

    }

}

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

I have added begin and close on the start and ends of the for loop found in createMolecule.

I have also added a random color generator courtesy of Random color generator in JavaScript

How to change the colour of each circle in html 5?

2 Answers2