Rysowanie lini na płótnie canvas

Dzień dobry!
Jestem świeżakiem który rozpoczyna naukę.
Bardzo proszę o wszelkie sugestie i zwrócenie uwagi jeśli źle używam forum.

Przechodząc do mojego wątku.
Próbuję za pomocą canvas stworzyć linie na płótnie od png o nazwie "point".
Ćwiczenie które niżej wkleiłem pochodzi z zajęć na których się uczę więc teoretycznie, co też widzę na filmie powinno działać.
Nie rozumiem co jest nie tak z kodem a generuje mi następujący błąd.

src\App.js
  Line 20:25:  'tempo' is not defined  no-undef

Sprawdziłem kilka razy pisownie i na pewno według ćwiczenia nie ma literówki w "var temmpo".
Rozumiem że błąd świadczy o nie zdefiniowaniu zmiennej jednak nie mogę zrozumieć "czemu komuś kod działa a mi nie"

Pozdrawiam serdecznie każdego kto spróbuje mi pomóc.

import logo from './logo.svg';
import point from './point.png';
import './App.css';
function loadApp(){
  makeCanvasApp();
}
function makeCanvasApp(){
  var imagePoint = new Image();
  imagePoint.src = point;
  var tempo_min = document.getElementById("tempo_min").value;
  var tempo_max = document.getElementById("tempo_max").value;
  var p1_x_min = document.getElementById("p1_x_min").value; 
  var p1_x_max = document.getElementById("p1_x_max").value;
  var temmpo = rand(tempo_min,tempo_max);
  var p1 = {x:rand(p1_x_min,p1_x_max),y:rand(100,400)};
  var p2 = {x:rand(450,500),y:rand(100,400)};
  var dx = p2.x - p1.x;
  var dy = p2.y - p1.y;
  var line = Math.sqrt(dx * dx + dy * dy);
  var progress = line / tempo; 
  var xprogress = (p2.x - p1.x)/progress; 
  var yprogress = (p2.y - p1.y)/progress;
  var ball = {x:p1.x,y:p1.y};
  var points = new Array();
  var canvas = document.getElementById("cavnas");
  var ctx = canvas.getContext("2d");
  function rand(min,max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max-min)) + min;

  }
function draw(){
  ctx.filleStyle = "green";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.strokeStyle = "red";
  ctx.strokeRect(1,1,canvas.width-20,canvas.heighht-20);
  if (progress > 0){
    progress--;
    ball.x += xprogress;
    ball.y += yprogress;
  }
  points.push({x:ball.x,y:ball.y});
  for(var i=0;i<points.length; i++){
    ctx.drawImage(imagePoint,points[i].x,points[i].y);
  }
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(ball.x,ball.y,15,0,Math.PI*2,true);
  ctx.closePath();
  ctx.fill();
}
function Loop(){
  window.setTimeout(Loop,20);
  draw();
}
Loop();
}



function App() {
  return (
    <div className="main">
      <h1>Funkcje, Mapy i Operatory Sass !!!</h1>
      <div className="left">
        <label> tempo min:</label>
        <br></br>
        <input type = "text" id="tempo_min" defaultValue="2"/>
        <br></br>
        <label> tempo max: </label>
        <br></br>
        <input type = "text" id="tempo_max" defaultValue="20"/> 
        <br></br>
        <label> p1 x min: </label>
        <input type = "text" id= "p1_x_min" defaultValue="10"/>
        <br></br>
        <label>p1 x max: </label>
        <input type="text" id="p1_x_max" defaultValue="30"/>
        <br></br>
        <button onClick={loadApp}> uruchom Animację !!!</button>
        </div>
        <div className="right">
          <canvas id="canvas" width="450" height="450"></canvas>
        </div>
        <p className="clear"></p>
      </div>
    
  );
}

export default App;

Qrde100 napisał(a):

src\App.js
Line 20 'tempo' is not defined no-undef

Sprawdziłem kilka razy pisownie i na pewno według ćwiczenia nie ma literówki w "var temmpo".

No najpierw deklarujesz temmpo (przez 2 m), a później używasz tempo (przez jedno m).