How to store data to variable in HTML code?

Question

I am trying to store a value from a HTTP request into temperature. The value will be in the form of characters '1', '2', '3', '4', '5'.

After storing the temperature, I want to do some comparison. For example, if it is 10 I want to draw a full filled rectangle. If it is 5 I want to a draw half filled rectangle. Could you guy give me some advise on how to do this?

I could not store the value to temperature and do the comparison.

var canvas = document.getElementById("DemoCanvas");
var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var temperature = parseFloat(this.responseText);
  }
};

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  if (temperature = 0) {
    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);
    ctx.fillStyle = 'rgb(102, 204, 0)';
    ctx.fillRect(9, 55, 50, 190);
  } else if (temperatue <= 30 || temperature >= 20) {
    ctx.fillStyle = 'rgb(102, 204, 0)';
    ctx.fillRect(8, 55, 150, 190);
  }
}