HTML Canvas does not refresh

user_19613896 0
Viewed 42

Hi there I am going crazy (my wife says it will be a short trip!) I have just started with Canvas and I cannot get the canvas to show intermediate results. I have read many articles here but those articles refer to all kinds of "things" and nothing to the basics. Here is the code:

<!DOCTYPE html>
<html>
<body>

<canvas id="RoomCanvas" width="300" height="200">
<!-- ************************************* -->
<!-- The wall is always here               -->
<!-- ************************************* --> 
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c = document.getElementById("RoomCanvas");
var ctx = c.getContext("2d");

ctx.clearRect(0, 0, 300, 200);
alert("clear");
doWall("green");
alert("try");
ctx.clearRect(0, 0, 300, 200);
alert("wall");
doWall("purple");
    
function doWall(theColor){
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, 200);
  ctx.closePath();
  ctx.lineWidth = 44;
  ctx.strokeStyle = theColor;
  ctx.stroke();
return;
}



</script>

</body>
</html>



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

ctx.clearRect(0, 0, 300, 200);
alert("clear");
doWall("green");
alert("try");
ctx.clearRect(0, 0, 300, 200);
alert("wall");
doWall("purple");

function doWall(theColor) {
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, 200);
  ctx.closePath();
  ctx.lineWidth = 44;
  ctx.strokeStyle = theColor;
  ctx.stroke();
  return;
}
<!DOCTYPE html>
<html>

<body>
  <canvas id="RoomCanvas" width="300" height="200">
<!-- ************************************* -->
<!-- The wall is always here               -->
<!-- ************************************* --> 
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>

</html>

The green line never shows. The canvas only "shows" when the program stops running. I have tried to take superfluous code out of the example. Basically I want the program to draw three lines. When the fourth line is drawn I want to erase line 1. My problem no lines show until the program quits and then only the last 3 lines show, the user never sees any other lines.

Thank you, your help will be appreciated.

canvas html javascript
1 Answers

Instead of using alert let's try with a setInterval that will call a draw function every 500 milliseconds...

Here is the code:

const c = document.getElementById("RoomCanvas");
const ctx = c.getContext("2d");
var color = "green"

function doWall(theColor){
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 100);
  ctx.closePath();
  ctx.lineWidth = 8;
  ctx.strokeStyle = theColor;
  ctx.stroke();
}

function draw() {
  ctx.clearRect(0, 0, c.width, c.height);
  doWall(color)
  color = (color == "green"? "red": "green")
}

setInterval(draw, 500)
<canvas id="RoomCanvas" width="100" height="100">
</canvas>

Same code now with more param in the doWall function

const c = document.getElementById("RoomCanvas");
const ctx = c.getContext("2d");
var color = "green"
var x = 10
var y = 90

function doWall(x, y, theColor){
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(x, y);
  ctx.closePath();
  ctx.lineWidth = 8;
  ctx.strokeStyle = theColor;
  ctx.stroke();
}

function draw() {
  ctx.clearRect(0, 0, c.width, c.height);
  doWall(x, y, color)
  color = (color == "green"? "red": "green")
  x = ++x % c.width
}

setInterval(draw, 100)
<canvas id="RoomCanvas" width="100" height="100">
</canvas>

user_75998330
Related