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 (plete 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>
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 (plete 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>
2 Answers
Reset to default 5You'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!
Using Shaded's answer, you could do the following:
if (Math.floor(endAngle) > 6.0) {
i = 0.01;
endAngle = i;
startAngle = 0;
if (Color == "Black") {
Color = "White";
ctx.lineWidth = 4;
} else {
Color = "Black";
ctx.lineWidth = 1;
}
}
ctx.strokeStyle = Color;
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.stroke();
startAngle = endAngle - 0.1;
Because the white will anti-alias with the black behind it, you'll get the jaggies at the edges if the line widths are the same. Increasing the line width alleviates this issue.
EDIT: Updated to remove excessive over-painting as per Shaded's ments.