キャンバスで長方形のネガティブドローイングを停止するにはどうすればよいですか？

私は現在、JavaScriptの初心者であり、キャンバスを学んでいます。右から左に後ろに引いた場合、入力に負の数が表示される理由を誰かが説明するのではないかと思いました。長方形をどの方向に描いても、長方形の実際のサイズを表示することを積極的にする方法はありますか？

これがJSフィドルです。https://jsfiddle.net/asn6wzw4/2/

HTML

<form id="areaform">
<label for="wid">Width:</label>
<input id="wid" type="number">
<label for="hgt">Height:</label>
<input id="hgt" type="number">
<br/>
<label for="area1">Area:</label>
<output id="area"></output>
<br/>
<label for="perimeter1">Perimeter:</label>
<output id="perim"></output>
<br/>
<button onclick="getarea()" type="button">Get Area</button>
</form>

<div id="drawRectangle">
<canvas id="rectCanvas"  width=500 height=500></canvas>
</div>

JS

var canvas, context, startX, endX, startY, endY;
var mouseClicked = 0;

function mouseUp(e) {
if (mouseClicked  !== 0) {
    mouseClicked = 0;
    var pos = getMousePos(canvas, e);
    endX = pos.x;
    endY = pos.y;
    drawRectangle(); 
  }
}

 function mouseDown(e) {
    mouseClicked = 1;
    var pos = getMousePos(canvas, e);
    startX = endX = pos.x;
    startY = endY = pos.y;
    drawRectangle();
 }

  function mouseXY(e) {
     if (mouseClicked  !== 0) {
         var pos = getMousePos(canvas, e);
         endX = pos.x;
         endY = pos.y;
         drawRectangle();
      }
  }

 function drawRectangle() {

  var width = endX - startX;
  var height = endY - startY;
  var offsetX = (width > 0);
  var offsetY = (height > 0);


  document.getElementById("wid").value = width;
  document.getElementById("hgt").value = height;

  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.rect(startX + offsetX, startY + offsetY, width, height);
  context.fillStyle = "#88EF5E";
  context.fill();

 }

 function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
   };

  }


  function init() {
      canvas = document.getElementById("rectCanvas");
      context = canvas.getContext("2d");
      canvas.addEventListener("mousedown", mouseDown);
      canvas.addEventListener("mousemove", mouseXY);
      canvas.addEventListener("mouseup", mouseUp);
  }


  init();