CODEWITHSUNDEEP
javascripthtmlcanvasgraphics
joe
joe

Reputation: 556

Changing Stroke color in HTML 5 Canvas

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>

Upvotes: 5

Views: 7262

Answers (2)

XNargaHuntress
XNargaHuntress

Reputation: 751

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 comments.

Upvotes: 2

Shaded
Shaded

Reputation: 17876

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!

Upvotes: 5

Related Questions