How to get the AJAX response and store it as variable and sketch rectangle from value of variable?

[nghirep]

Hi I try to use AJAX to create a website. This website contain a rectangle change there filling color as variable temperature increase. For example if temperature 0-10 there will no filling color. If it is 90 -100 the rectangle is fully fill. The variable temperature will be receive value from esp32 through HTTP. However, when I create a callback to access the value is not working. Could you guy give me some advice?

Code snapshot:

setInterval(function a() {
   
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
         drawfuntion(this);
    }
    
 
  };


  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 30000 ) ;

function drawfuntion (xml){
  var temperature =  parseFloat(xml.responseText);
  var canvas = document.getElementById("DemoCanvas");
  if (canvas.getContext) 
  {
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = "3";
    ctx.strokeStyle = "green";
    ctx.strokeRect(5, 50, 350, 200);
    ctx.lineWidth = "3";
    ctx.strokeStyle = "green";
    ctx.lineJoin = "round";
    ctx.strokeRect(355, 140, 40, 30);
   if (temperature  === 0 ){
    ctx.fillStyle = 'rgb(102, 204, 0)';
    ctx.fillRect(9, 55, 50, 190);
    ctx.font = "100px Comic Sans MS";
    ctx.fillStyle = "red";
    ctx.fillText(temperature , 500 , 180 );
    ctx.fillText("%" , 690 , 180 );}
}
}
}