Changing Stroke color in HTML 5 Canvas
canvas, graphics, html, javascript
Solution
You're having a little trouble with your angles. You're essentially redrawing the arc from 0 to your `endAngle` every time. So at the end when endAngle is greater than 6 you're redrawing from 0-6 with a white arc.
The easy fix is to just set `endAngle = 0.01` when you reset `i`. You may also want to update your `startAngle` on each iteration to be the end of your last arc, just so that it doesn't draw over itself all the time.
Hope this helps!
Problem
I'm trying to draw a circle, kind of a clock, i start at point p1 and draw an arc in black using the canvas 2d context, when i reach the point p1 (complete circle tour) i change color to white, and continue to draw, that should give it an effect like if the black arc is being erased, however this doesn't work as expected, because when i change the context's color, everything change... how to keep the first circle, in a color, and draw another one on topof it with different color, without changing the color in the whole scene ? here's my attempt ``` <!DOCTYPE html /> <html> <head> <title></title> <script type="text/javascript"> var i = 0.01; var Color = "Black"; var x = 75; // x coordinate var y = 75; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var anticlockwise = false; // clockwise or anticlockwise function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); var endAngle = i; // End point on circleMath.PI + (Math.PI * 5) / if (Math.floor(endAngle) >= 6) { i = 0.01; if (Color == "Black") { Color = "White"; } else { Color = "Black"; } } ctx.strokeStyle = Color; ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); ctx.stroke(); i = i + 0.05; //document.getElementById('display').innerHTML = Math.floor(endAngle) + " " + Color; } </script> </head> <body onload="window.setInterval(function(){draw()},100);"> <canvas id="canvas" width="150" height="150"></canvas> <span id="display"></span> </body> </html> ```