setTimeout to delay change on canvas

Question

When the right button is held down the herocolor changes to green (this already works), but I added a setTimeout so that after 1 second (while the button is still being held down) herocolor will become blue (this does not work). When the button is released it does turn back to red as expected.

My goal is to make the color toggle back and forth between green and blue every 1 second.

The alert properly delays and properly updates herocolor to blue but the square does not turn blue. I am utterly mystified why this isn't working.

loop = function() {

  var herocolor = "#ff0000";
  if (controller.right == true){
     herocolor = "#00ff00";
    setTimeout(function(){
      herocolor = "#0000ff";
      alert(herocolor);
    }, 1000);
  }

  context.fillStyle = "#202020";
  context.fillRect(0, 0, 800, 400);
  context.fillStyle = herocolor;
  context.beginPath();
  context.rect(hero.x, hero.y, hero.width, hero.height);
  context.fill();

  window.requestAnimationFrame(loop);
};

COMPLETE CODE

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
<style>
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html, body {
  height:100%;
  width:100%;
}
body {
  align-content:space-around;
  background-color:#202830;
  color:#ffffff;
  display:grid;
  justify-content:center;
}
canvas {
  background-color:#ffffff;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var context, controller, hero, loop;
context = document.querySelector("canvas").getContext("2d");
context.canvas.height = 400;
context.canvas.width = 800;
hero = {
  height:40,
  width:40,
  x:144,
  y:140,
};
controller = {
  right:false,
  up:false,
  keyListener:function(event) {
    var key_state = (event.type == "keydown")?true:false;
    switch(event.keyCode) {
      case 39:
        controller.right = key_state;
      break;
    }
  }
};
loop = function() {

  var herocolor = "#ff0000";
  if (controller.right == true){
     herocolor = "#00ff00";
    setTimeout(function(){
      herocolor = "#0000ff";
      alert(herocolor);
    }, 1000);
  }

  context.fillStyle = "#202020";
  context.fillRect(0, 0, 800, 400);
  context.fillStyle = herocolor;
  context.beginPath();
  context.rect(hero.x, hero.y, hero.width, hero.height);
  context.fill();

  window.requestAnimationFrame(loop);
};
window.addEventListener("keydown", controller.keyListener)
window.addEventListener("keyup", controller.keyListener);
window.requestAnimationFrame(loop);
</script>
</body>

Answer 1

Please take reference from the below sample code, here I am creating a simple line using canvas and displaying after 3 sec using setTimeout :

 var canvas = $("#myCanvas")[0]; var c = canvas.getContext("2d"); var amount = 0; var startX = 164; var startY = 120; var endX = 1094; var endY = 120; setTimeout(function() { var interval = setInterval(function() { amount += 0.01; // change to alter duration if (amount > 1) { amount = 1; clearInterval(interval); } c.clearRect(0, 0, canvas.width, canvas.height); c.strokeStyle = "black"; c.lineWidth=1; c.strokeStyle="#707070"; c.moveTo(startX, startY); // lerp : a + (b - a) * f c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount); c.stroke(); }, 0); }, 3000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="myCanvas" width="1250" height="120"></canvas>

setTimeout to delay change on canvas

Question

1 answers

solution1
-1 2019-12-23 14:35:27

setTimeout to delay change on canvas

Question

1 answers

solution1 -1 2019-12-23 14:35:27

solution1
-1 2019-12-23 14:35:27