PDA

View Full Version : Color cycling not working as I had expected



Ing
Feb 13th, 2011, 12:08 PM
Can somebody please explain why when the lines of code that are commented out are reintroduced that this code breaks instead of resulting in each of the four circles being a different color?

<!DOCTYPE HTML>
<html>
<head><title>Circles</title></head>
<body>

<canvas id="myCanvas" width="512" height="128" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var i=0;
var axisX=128;
var axisY=64;
var radius=56;
//var colors=[red, green, blue, yellow];
//var currentColor;

function drawCircle(){
//currentColor=colors[i];
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//cxt.fillStyle=currentColor;
cxt.strokeStyle="black";
cxt.beginPath();
cxt.arc(axisX,axisY,radius,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.stroke();
}

for (i=0;i<4;i++){
drawCircle();
axisX=axisX+84;
}

</script>

</body>
</html>
What am I doing wrong?
Thank you!

vwphillips
Feb 13th, 2011, 05:23 PM
<!DOCTYPE HTML>
<html>
<head><title>Circles</title></head>
<body>

<canvas id="myCanvas" width="512" height="128" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var axisX=128;
var axisY=64;
var radius=56;
var colors=['red', 'green', 'blue', 'yellow'];

function drawCircle(){
var currentColor=colors[i];
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle=currentColor;
cxt.strokeStyle="black";
cxt.beginPath();
cxt.arc(axisX,axisY,radius,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.stroke();
}

for (var i=0;i<4;i++){
drawCircle();
axisX=axisX+84;
}

</script>

</body>
</html>

Ing
Feb 13th, 2011, 08:27 PM
Yaaaaaaay!
OMG it was so simple and obvious once pointed out. Thank you!