Ytukyg

I am new to JavaScript and I am having a hard time understanding how to get the canvas to cooperate with stuff I want to do.

I am trying to have my HTML button outside the canvas create a rectangle on the canvas. Then I want the rectangle to fall. I have the canvas animated, I have the button set to create a rectangle at user inputted coordinates, but...the canvas won't animate it.

It won't fall like the statically created rectangles. I also am struggling with how to get my button to create a new rectangle each time instead of redrawing the same one? Hoping someone can explain more than just give me the code.
Thanks in advance.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

window.onload = addListeners;



function addListeners() {

  document.getElementById('b1').addEventListener('click',btn1,false);



  function btn1() {

    var inputx = document.getElementById("work").value;

    var inputy = document.getElementById("y").value;

    var inputs = document.getElementById("s").value;

    new Rectangle(inputx,inputy,inputs);

    // rec.x = inputx;

    //rec.y = inputy;

    //rec.s = inputs;

  }

}



var r2 = new Rectangle(500, 50, 50);

var rec = new Rectangle();  



//animate

function animate() {

  requestAnimationFrame(animate);

  ctx.clearRect(0,0,1450,250);



  r2.draw();

  r2.update();

  rec.draw();

  rec.update();



}

code for rectangle:

function Rectangle(x,y,s){

this.x = x;

this.y = y;

this.s = s;



this.draw = function(){

    //console.log('fuck');

    ctx.fillStyle = "rgba(0,200,0,1)";

    ctx.fillRect(this.x,this.y,this.s,this.s);



}



this.update = function(){

    console.log(this.y);

    if((this.y + this.s) <= 250){

    this.y= this.y+2;

    }

}

}

The button is not animating anything as the animate method was not being called. Also in your code when you called animate it ended in an infinite loop as requestAnimationFrame will continue to call animate repeatedly, so I've added a condition around requestAnimationFrame(animate) to check the squares height and stop running it when it reaches the bottom, similar to what you had in your update function.

To create a new square every time you click the button, I moved the creation of the Rectangles inside the btn1 function. If you want to keep the old squares while creating new ones, you will need to keep track of them outside the canvas and redraw them with everything else each animation.

I guessed what your html looks like, but you can run the code below it will drop two squares, but note that the stop condition is only on the hard coded one.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

document.getElementById("b1").addEventListener("click", btn1, false);



var r2;

var rec;



function btn1() {

   var inputx = document.getElementById("work").value;

   var inputy = document.getElementById("y").value;

   var inputs = document.getElementById("s").value;

   r2 = new Rectangle(500, 50, 50);

   rec = new Rectangle(parseInt(inputx, 10), parseInt(inputy, 10), parseInt(inputs, 10));

   animate();

}

  

//animate

function animate() {

  if (r2.y + r2.s <= 400) {

    requestAnimationFrame(animate);

  }

  

  ctx.clearRect(0,0,1450,400);

  r2.draw();

  r2.update();

  rec.draw();

  rec.update();



}



function Rectangle(x,y,s){

this.x = x;

this.y = y;

this.s = s;



this.draw = function(){

    ctx.fillStyle = "rgba(0,200,0,1)";

    ctx.fillRect(this.x,this.y,this.s,this.s);

}



this.update = function(){

    this.y= this.y+2;

	}

}

<div>

  <input id='work'>

  <input id='y'>

  <input id='s'>

  <button id="b1"> Create Sqaure</button>

</div>

<canvas id="myCanvas" width=600 height=400></canvas>