JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="500">Get a new Browser!</canvas>
<form>
  <input type="range" min="10" max="250" value="100" id="speedCont" />
  <p>
    Rostislav Myshkin A00787633 [email protected]
    <br /> Completed:3-D house, smoke, animation for smoke, slider for speed.
    <br /> Challanges: animating the smoke.
  </p>

</form>

CSS

#canvas {
  background-color: aqua;
  border: 1px solid black;
  margin-bottom: 10px;
}

body {
  background-color: gray;
}

input[type=range] {
  -webkit-appearance: none;
  border: 3px solid black;
  width: 500px;
  border-radius: 20px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 500px;
  height: 10px;
  background: #ddd;
  border: none;
  border-radius: 20px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 3px solid black;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: red;
  margin-top: -8px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.strokeLinecap = 'round';
var a = 1;
//var speed = 100;
var posY = 100,
  posY2 = 120,
  posY3 = 140,
  posX = 100,
  vx = 5,
  vy = 5;


function foundation() {
  //grass
  ctx.fillStyle = "green";
  ctx.strokeStyle = "#000000";
  ctx.beginPath();
  ctx.moveTo(25, 375);
  ctx.lineTo(125, 325);
  ctx.lineTo(471, 325);
  ctx.lineTo(400, 375);
  ctx.lineTo(25, 375);
  ctx.fill();
  ctx.stroke();

  //front face ground
  ctx.fillStyle = "#873600";
  ctx.strokeStyle = "#000000";
  ctx.beginPath();
  ctx.moveTo(25, 375); //top left
  ctx.lineTo(25, 425); //bottom left
  ctx.lineTo(400, 425); //bottom right
  ctx.lineTo(400, 375); //top right
  ctx.lineTo(25, 375); //top line
  ctx.fill();
  ctx.stroke();

  //east face ground 
  ctx.fillStyle = "#872000";
  ctx.strokeStyle = "#000000";
  ctx.beginPath();
  ctx.moveTo(475, 325); //top right
  ctx.lineTo(475, 375); //bottom right
  ctx.lineTo(400, 425); //bottom line
  ctx.lineTo(400, 375); //top left
  ctx.lineTo(475, 325); //top right
  ctx.fill();
  ctx.stroke();

}

function house() {
  //front face
  ctx.fillStyle = "#2980B9";
  ctx.strokeStyle = "#000000";
  ctx.beginPath();
  ctx.moveTo(110, 365);
  ctx.lineTo(110, 200);
  ctx.lineTo(375, 200);
  ctx.lineTo(375, 365);
  ctx.lineTo(110, 365);
  ctx.fill();
  ctx.stroke();

  //east face
  ctx.fillStyle = "#1760B4";
  ctx.strokeStyle = "#000000";
  ctx.beginPath();
  ctx.moveTo(375, 200); //lower left
  ctx.lineTo(415, 180); //
  ctx.lineTo(415, 340);
  ctx.lineTo(375, 365);
  ctx.lineTo(375, 200);
  ctx.fill();
  ctx.stroke();

  //roof front face 
  ctx.fillStyle = "#B41717";
  ctx.strokeStyle = "#000000";
  ctx.beginPath();
  ctx.moveTo(95, 210);
  ctx.lineTo(160, 140);
  ctx.lineTo(395, 140);
  ctx.lineTo(365, 210);
  ctx.lineTo(365, 210);
  ctx.lineTo(95, 210);
  ctx.fill();
  ctx.stroke();

  //roof east face 
  ctx.fillStyle = "darkred";
  ctx.strokeStyle...