[JS-CANVAS]Simple functions and statemensts. But that way of thinking faulted.

Hello Treehouse ! First : The way how you teach is phenomenal ! Second : I decided to do a little research about working on canvas in HTML5 and try myself using the knowledge from here. Third : I decided to do a simple "animation" in JavaScript.

The whole idea was to create a inner lines border using object myHero{}. As a loop I decided to use metod setInterval() to run core function update().

In update() there is couple of statemensts. When the upper line will reach true the right line start to drawing. When the right will reach true the bottom runs.

And it was fine till started on the bottom line. It seems to be stucked and doesn't want to go further ...

<canvas id="myCanvas" width = "500" height = "500"></canvas>

<script> var ctx = document.getElementById('myCanvas').getContext('2d');

function up() { ctx.font = '30px Arial'; ctx.fillText(myHero.name, myHero.xPos, myHero.yPos); myHero.xPos = myHero.xPos + 50; }

function right(){

  ctx.font = '30px Arial'; 
  ctx.fillText(myHero.name, myHero.xPos, myHero.yPos);
  myHero.yPos = myHero.yPos+50;

}

function bottom(){ ctx.font = '30px Arial'; ctx.fillText(myHero.name, myHero.xPos, myHero.yPos); myHero.xPos = myHero.xPos - 50; }

var myHero = { xPos: 50, yPos: 50, name: 'H'

}

function update() { if (myHero.xPos < 400){ up(); }

if (myHero.xPos > 350){
    right();
}
if (myHero.yPos > 450){
    bottom();
}

}

setInterval(update, 500); </script>

Ups ... Sorry I don't know how to show script to make it more readable.