CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
User
User

Reputation: 159

Why are my canvas lines not being drawn individually?

I have a few animated lines on my canvas which are not drawing individually, they're trying to draw as one complete path. Why is this happening?

$(document).ready(function(){
    canvas = document.getElementById("test");
    ctx = canvas.getContext("2d");

    function animateLines(name, x1, y1, x2, y2, stroke, width, duration){
        var count = 0;
        var ms = 10;
        duration = duration * ms;

        ctx.beginPath();
        ctx.moveTo(x1, y1);

        function countNumbers(){
            count += 1;
            if(x2 > x1){
                ctx.lineTo((x1 + count), y2);
            }

            else if(y2 > y1){
                ctx.lineTo(x1, (y1 + count));
            }

            if((x1 < x2) && (count == x2)){
                clearInterval(counter);
            }

            else if((y1 < y2) && (count == y2)){
                clearInterval(counter);
            }
            ctx.lineWidth = width;
            ctx.strokeStyle = stroke;
            ctx.stroke();
        }

        $("#pause").on("click", function(){
            clearInterval(counter);
        })
        $("#play").on("click", function(){
            counter = setInterval(countNumbers, duration);
        })
    }

    animateLines("Line", 0, 100, 100, 100, "white", 5, 3);
    //animateLines("Line2", 150, 250, 350, 250, "red", 5, 5);
    //animateLines("Line3", 100, 0, 100, 300, "blue", 5, 1);
})

When I'm only calling the function once, it works fine, it's when I call it more than once that it tries to draw one complete shape.

Upvotes: 0

Views: 54

Answers (1)

Kaiido
Kaiido

Reputation: 137141

You will need to moveTo(x1, x2) for each line and also to beginPath() in order to change their stroke color : otherwise, stroke() will draw all the shapes.

var canvas = document.getElementById("test"),
  ctx = canvas.getContext("2d");

function animateLines(name, x1, y1, x2, y2, stroke, width, duration) {
  var count = 0;
  var ms = 10;
  duration = duration * ms;
  var counter;


  function countNumbers() {
    ctx.beginPath();
    ctx.moveTo(x1, y1);

    count += 1;
    if (x2 > x1) {
      ctx.lineTo((x1 + count), y2);
    } else if (y2 > y1) {
      ctx.lineTo(x1, (y1 + count));
    }

    if ((x1 < x2) && (count == x2)) {
      clearInterval(counter);
    } else if ((y1 < y2) && (count == y2)) {
      clearInterval(counter);
    }
    ctx.lineWidth = width;
    ctx.strokeStyle = stroke;

    ctx.stroke();
  }

  $("#pause").on("click", function() {
    clearInterval(counter);
  })
  $("#play").on("click", function() {
    counter = setInterval(countNumbers, duration);
  })
}

animateLines("Line", 0, 100, 100, 100, "green", 5, 3);
animateLines("Line2", 150, 250, 350, 250, "red", 5, 5);
animateLines("Line3", 100, 0, 100, 300, "blue", 5, 1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="pause">Pause</button>
<button id="play">play</button></div>
<canvas id="test" width="350" height="350"></canvas>

Upvotes: 1

Related Questions