How to use a for loop to move the position of a rectangle in a canvas

Question

Firstly, I am new to canvas and I tried to wrap it around this for 2 days, so I would really appreciate any help. My goal is to make the green rectangle animated up 1 pixel at a time (it doesn't matter at the moment), but in the end I also want to do the same for red. If I annotate the for loop, you can see the rectangles at my desired starting position, however, when I add the for loop back to the canvas, it is empty when theoretically I hope that the green rectangle will move up. (Or down, it doesn't really matter).

$(document).ready(function() {
  var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    cw = canvas.width,
    ch = canvas.height;


  function rectangles() {

    var y = 0;
    // Starting point rectangles
    ctx.save();
    ctx.clearRect(0, 0, cw, ch);
    ctx.beginPath();
    ctx.fillStyle = "#006847";
    ctx.fillRect(0, 0, 200, 450);
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = "#CE1126";
    ctx.fillRect(400, 0, 200, 450);
    ctx.closePath();

    ctx.save();
    /*for (i = 0; i < 450; i++) {
        y = y + 1;
        ctx.beginPath();
        ctx.fillRect(0, y, 200, 450);
        ctx.closePath();
        ctx.clearRect(0, 0, cw, ch);
    }*/
  }

  setInterval(rectangles, 2000);
});

CSS : #canvas {
  border: 3px #000 solid;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="canvas-container">
  <canvas id="canvas" height="450" width="600"></canvas>
</div>

Run codeHide result

Answer 1

for. , if.

$(document).ready(function() {
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        cw = canvas.width,
        ch = canvas.height,
        GY = 0,
        RY = 0;

    rectangles();

    function rectangles() {
        if (GY > -450 && RY > -450) {
            GY -= 1;  // pixel
            RY -= 1;
        } else if (GY == -450 && RY == -450) {
            GY = 450;
            RY = 450;
        }
        // Starting point rectangles
        ctx.clearRect(0, 0, cw, ch);
        // green
        ctx.fillStyle = "#006847";
        ctx.fillRect(0, GY, 200, 450);
        // red
        ctx.fillStyle = "#CE1126";
        ctx.fillRect(400, RY, 200, 450);
        requestAnimationFrame(rectangles);
    }
});

#canvas {
  border: 3px #000 solid;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-container">
    <canvas id="canvas" height="450" width="600"></canvas>
</div>

Hide result

Answer 2

: .

, , script ( ).

requestAnimationFrame: https://developer.mozilla.org/de/docs/Web/API/window/requestAnimationFrame

$(document).ready(function() {
  var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    cw = canvas.width,
    ch = canvas.height;

  var y = 0;

  function rectangles() {

    // Starting point rectangles
    ctx.save();
    ctx.clearRect(0, 0, cw, ch);
    ctx.beginPath();
    ctx.fillStyle = "#006847";
    ctx.fillRect(0, 0, 200, 450);
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = "#CE1126";
    ctx.fillRect(400, 0, 200, 450);
    ctx.closePath();

    ctx.save();
    y++;

    ctx.beginPath();
    ctx.fillRect(0, y, 200, 450);
    ctx.closePath();
    ctx.clearRect(0, 0, cw, ch);
    if (y < 450)
      requestAnimationFrame( rectangles );
  }


  setInterval(rectangles, 2000);
});

Answer 3

: siam :

, rectangles() for , ( ), - .

, . i, , , . , , .

$(document).ready(function() {
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        cw = canvas.width,
        ch = canvas.height;
        step = 1; // Distance the rectangle move each time
        refresh = 10; // Repaint interval
        var i = 0; // Record how far has the rectangle go

    function rectangles() {
        // Starting point rectangles
        ctx.save();
        ctx.clearRect(0, 0, cw, ch);
        ctx.beginPath();
        ctx.fillStyle = "#006847";
        // Leave blank area with height: i*step
        ctx.fillRect(0, 0, 100, ch-i*step); 
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = "#CE1126";
        ctx.fillRect(200, 0, 100, ch-i*step);
        ctx.closePath();

        ctx.save();
        i ++;
        // The canvas is blank, stop drawing
        if (ch-i*step < 0) {
          clearInterval(interval)
        }
    }
  interval = setInterval(rectangles, refresh);
  });

#canvas {
    border: 3px #000 solid;
    margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="canvas-container">
  <canvas id="canvas" height="225" width="300"></canvas>
</div> 

Hide result

Answer 4

The reason you cannot reach is because the canvas is a single object. You cannot move the rectangles until you clear the canvas. clearRecthere for salvation.

I created a function clearCanvas. It will work and clean the canvas before re-positioning the rectangles. This way, you re-draw the canvas every two seconds with new calculated positions.

$(document).ready(function() {
  var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    cw = canvas.width,
    ch = canvas.height;

  var x = 100;
  var y = 100;

  function rectangles() {
    clearCanvas();
    var y = 0;
    // Starting point rectangles
    ctx.save();
    ctx.clearRect(0, 0, cw, ch);
    ctx.beginPath();
    ctx.fillStyle = "#006847";
    ctx.fillRect(x, 0, 50, 50);
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = "#CE1126";
    ctx.fillRect(x + 400, 0, 50, 50);
    ctx.closePath();

    ctx.save();


    if (x < 10) {
      x = 100;
    }
    x = x - 10;

  }

  setInterval(rectangles, 400);

  function clearCanvas() {
    ctx.clearRect(0, 0, cw, ch);
  }

});

#canvas {
  border: 3px #000 solid;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="canvas-container">
  <canvas id="canvas" height="450" width="600"></canvas>
</div>

Run codeHide result