CODEWITHSUNDEEP
javascriptcanvas
dezman
dezman

Reputation: 19368

Why is my canvas animated arc glitching at the midpoint?

Fiddle, I tried to narrow it down to just whats important. I have a canvas arc which is 272 degrees accomplished with an offset. When the green animated arc reaches 135 degrees, it looks like this in Chrome and maybe other browsers:

enter image description here

Usually the entered value will not be exactly that, so it skips past the glitch very fast. But it would be really amazing if I could get rid of it completely. I am fairly new to canvas and don't know what to try. Thanks!!

Relevant JS:

function setGauge(valForGauge, val, distance){
    var time = 500; 
    time = time / (Math.abs(valForGauge - preValForGauge));

    if (valForGauge > preValForGauge) {
        var animate = setInterval(function(){
            if (preValForGauge == valForGauge)
                clearInterval(animate);
            else {
                preValForGauge++;
                drawValueArc(preValForGauge);              
            }
        }, time);
    } else if (valForGauge < preValForGauge) {
        var animate2 = setInterval(function(){
            if (preValForGauge == valForGauge)
                clearInterval(animate2);
            else {
                preValForGauge--;
                drawValueArc(preValForGauge);
            }
        }, time);
    } else if (valForGauge == 0 || valForGauge == preValForGauge) {
        preVal = val;
    }
}

function drawValueArc(val) {
    drawArc(ctx2, 57, 32, "rgb(230, 230, 230)", startRadians, endRadians);
    drawArc(ctx2, 57, 31, "#27AE60", startRadians, val);
}

function drawArc(ctx, radius, width, color, start, end) {
    ctx.beginPath();
    ctx.arc(cx, cy, radius, (startRadians + offset) * deg2rad, (end + offset) * deg2rad, false);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();

Upvotes: 3

Views: 249

Answers (1)

user1693593
user1693593

Reputation:

This is clearly a bug with Chrome's (and Canary) implementation. If works fine in FireFox (Aurora). In Safari it's fine (although it took one year for it to animate it). Opera works fine too.

You should report the bug to Google from the browser (here is how):
https://support.google.com/chrome/answer/95315?hl=en

You can try this solution as a work-around: 

var deg2rad = Math.PI / 180.001; //179.999

Updated fiddle incl. workaround:
http://jsfiddle.net/AbdiasSoftware/6ppDK/6/

There are many issues with the arc method in Chrome, some may or may not be related:
https://code.google.com/p/chromium/issues/detail?id=245233
https://code.google.com/p/chromium/issues/detail?id=243996
http://www.twiddla.com/test/ChromeCanvas.html

Upvotes: 3

Related Questions