Why won't my javascript return the values i want?

Question

I am trying to use a function to draw a rectangle on a canvas. The first step of this would be to find the points that the mouse is clicked. Here is the code i am using:

wbtCanvas = document.getElementById("wbtCanvas");

function relMouseCoords(event){
  var totalOffsetX = 0; //coordinates of corner of canvas
  var totalOffsetY = 0;
  var canvasX = 0;
  var canvasY = 0;
  var wbtCanvas = this; //what called the event

  do{
      totalOffsetX += wbtCanvas.offsetLeft - wbtCanvas.scrollLeft; //relative coordinates
      totalOffsetY += wbtCanvas.offsetTop - wbtCanvas.scrollTop;
  }
  while(wbtCanvas = wbtCanvas.offsetParent)
  canvasX = event.pageX - totalOffsetX;
  canvasY = event.pageY - totalOffsetY;

  point = {x:canvasX, y:canvasY};
  console.log("{" + point.x + ", " + point.y + "}");
  return point; //object returned
}

function drawRectangle(){
  x = relMouseCoords.x;
  y = relMouseCoords.y;
  console.log(x + " " + y);
}

When i call the function drawRectangle() in the console, making sure my mouse pointer is over the canvas, it gives me the following response:

"undefined undefined"

Answer 1

relMouseCoords is a function, you have to call it and use the return value:

function drawRectangle() {
    var coords = relMouseCoords();
    console.log (coords.x + " " + coords.y);
}

Answer 2

一方面，您需要调用relMouseCoords函数。