Help with update function in JS Class

Hi, I hope this is the correct place to ask for help.

I writing a JS class to create a simple horizontal temperature meter inside a HTML canvas tag. I’m having trouble figuring out how to code the update function to update the pointer position and value. I realize I need to remove the initial value and line and then updated the new line position and value. So here is where I’m hitting a wall. Not sure how to achieve that. I was hoping someone would guide me in the right direction.

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Rectangle Example</title>
  </head>
  <style>
    canvas {
        /* border: 1px red solid; */
    }
  </style>
  <body>
  <script>
    class VariableRectangle {
        constructor(canvas, width, height, pointerLabel, leftLabel, rightLabel) {
            this.canvas = canvas;
            this.context = this.canvas.getContext('2d');
            this.x = 50;
            this.y = 30;
            this.width = width;
            this.height = height;
            this.canvas.width = this.width + 100;
            this.canvas.height =this.height + 45;
            this.pointerLabel = pointerLabel;
            this.leftLabel = leftLabel;
            this.rightLabel = rightLabel;
            this.context.strokeStyle = "black";
            this.context.lineWidth = 1;
            this.realPoiterPos;
            this.numDivisions;

            this.CalcPointerPos();
            this.drawRectangle();
            this.drawVerticalDivisions();
            this.drawPointerLine();
            this.drawLabels();
        }

    drawRectangle() {
      this.context.strokeRect(this.x, this.y, this.width, this.height);
    }
  
    CalcPointerPos(){
        const leftLabelVal = parseFloat(this.leftLabel);
        const rightLabelVal = parseFloat(this.rightLabel);
        this.numDivisions = (rightLabelVal - leftLabelVal) / 0.1;
        const positionVal = parseFloat(this.pointerLabel);
        // console.log(positionVal);
        this.realPoiterPos = (positionVal - leftLabelVal) / 0.1;
        // this.segmentWidth = this.width / this.numDivisions;
        this.segmentWidth = this.width / this.numDivisions;
        console.log(this.realPoiterPos);
        console.log(this.numDivisions);
    }
    
    drawVerticalDivisions() {
      for (let i = 1; i < this.numDivisions; i++) {
        const xPos = this.x + (i * this.segmentWidth);
        const startY = this.y;
        const endY = this.y + this.height;
        this.context.setLineDash([1,2])
        this.context.strokeStyle = "grey";
        this.context.beginPath();
        this.context.moveTo(xPos, startY-2);
        this.context.lineTo(xPos, endY+4);
        this.context.stroke();
      }
    }

    drawPointerLine() {
      const pointerX = this.x + (this.realPoiterPos * this.segmentWidth);
      this.context.beginPath();
      this.context.lineWidth = 3;
      this.context.setLineDash([1,0])
      this.context.moveTo(pointerX, this.y -5);
      this.context.lineTo(pointerX, this.y+this.height+5);
      this.context.strokeStyle = "teal";
      this.context.stroke();
    }  
  
    drawLabels() {
      const leftLabelX = this.x-25;
      const leftLabelY = this.y + (this.height / 2);
      const rightLabelX = this.x + this.width+25;
      const rightLabelY = leftLabelY;
      const pointerLabelX = this.x + (this.realPoiterPos * this.segmentWidth);
      const pointerLabelY = this.y - 15;
      this.context.font = "18px Calibri";
      this.context.textAlign = "center";
      this.context.textBaseline = "middle";
      this.context.fillStyle = 'blue';
      this.context.fillText(this.leftLabel+ "°", leftLabelX, leftLabelY);
      this.context.fillText(this.rightLabel+ "°", rightLabelX, rightLabelY);
      this.context.font = "14px Calibri";
      this.context.fillStyle = 'green';
      this.context.fillText(this.pointerLabel+ "°", pointerLabelX, pointerLabelY);
    }

    updatePointer(label){
        this.pointerLabel = label;
        this.CalcPointerPos();
        // this.CalcPointerPos();
        // this.drawRectangle();
        // this.drawVerticalDivisions();
        this.drawPointerLine();
        this.drawLabels();
    }

  }

  </script>  
    <canvas id="myCanvas"></canvas>
    <!-- <script src="VariableRectangle2.js"></script> -->
    <script>
      const canvas = document.getElementById("myCanvas");
      const variableRect = new VariableRectangle(canvas, 200, 35, "27.8", "26.5", "28.0");
      
    </script>
    <script>
        variableRect.updatePointer("27.1");
    </script>
  </body>
</html>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.