CODEWITHSUNDEEP
javascripthtmlanimationcanvas
visionInc
visionInc

Reputation: 325

Why does canvas draw lines between circle (arc)?

In the moment canvas draw 15 circles with different speed and size which move from ltr. when one of them leaves the window it will be set to the start. The Problem is that canvas draw lines between the circles and i dont know why? Can anybody help?

window.onload = function () {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var W = canvas.width = window.innerWidth;
    var H = canvas.height = window.innerHeight;
    var mp = 15; //max particles
    var particles = [];
    //var rotate = 180;

    reqAnimFrame = window.requestAnimationFrame ||
                   window.mozRequestAnimationFrame    ||
                   window.webkitRequestAnimationFrame ||
                   window.msRequestAnimationFrame     ||
                   window.oRequestAnimationFrame;

    for ( var i = 0; i < mp; i++ )
        {
            particles.push({
                x: Math.floor(Math.random()*W), //x-coordinate
                y: Math.floor(Math.random()*H), //y-coordinate
                d: Math.floor(Math.random()*(mp - 1) + 1), //density
                r: Math.floor(Math.random()*(70 - 10) + 10) //radius
            })
        }



    function animate() {
        reqAnimFrame(animate);
        for ( var i = 0; i < mp; i++ )
            {
                var p = particles[i];
                p.x += p.d;


                if(p.x >= W){
                    p.x = -300;
                    p.y = Math.floor(Math.random()*H);
                }
                draw();
            }
    }

    function draw() {
        ctx.clearRect(0, 0, W, H);
        ctx.fillStyle = "rgba(0,204,142,1";
        ctx.beginPath();
        for ( var i = 0; i < mp; i++ )
            {
                var p = particles[i];
                ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false);
                //ctx.moveTo(p.x,p.y);
                //ctx.lineTo(p.x + 150, p.y + (-180));
                //ctx.lineTo(p.x + 300, p.y);
            }
        ctx.stroke();
    }
    animate();
    };//onload function

Upvotes: 1

Views: 4843

Answers (1)

user1693593
user1693593

Reputation:

Change the code a little bit as beginPath() and stroke() are now only called once - what happens is that the arcs are accumulated in the loop and since they are not really circles - they have two open ends - these ends will be connected to each other creating lines between the arcs.

Try the following:

function draw() {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = "rgba(0,204,142,1";
    for ( var i = 0; i < mp; i++ ) {
        var p = particles[i];
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false);
        ctx.stroke();
    }
}

Upvotes: 11

Related Questions