scene

var canvas = document.getElementById("myCanvas");

// styles begin
canvas.style.border = "solid 1px black";
// styles end

var ctx = canvas.getContext("2d");

console.log(canvas.offsetWidth + "-" + canvas.offsetHeight);

if (window.devicePixelRatio > 1) {

  canvas.width = canvas.clientWidth * 2;
  canvas.height = canvas.clientHeight * 2;


}

console.log(canvas.width);
console.log(canvas.height);


//HEIGHT
ctx.moveTo(canvas.width / 2, 20);

ctx.lineTo(canvas.width / 2, canvas.height);


//WIDTH
ctx.moveTo(20, canvas.height / 2);
ctx.lineTo(canvas.width - 20, canvas.height / 2);

/*

*/
ctx.moveTo(20, canvas.height / 2);
ctx.lineTo(20, 20);


ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo(canvas.width - 20, 20);

ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo(20, canvas.height - 20);

ctx.strokeStyle = "red";

ctx.stroke();

ctx.beginPath();

for(var i = 50; i >= 0; i--)
ctx.arc(canvas.width - canvas.width / 3, canvas.height - canvas.height / 3, i, 0, 2 * Math.PI);

ctx.stroke();

function getMousePosition(canvas, event) {

  let rect = canvas.getBoundingClientRect();
  let x = event.clientX - rect.left;
  let y = event.clientY - rect.top;

  let locX = 0;
  let locY = 0;

  if (x >= canvas.width / 2 && y >= canvas.height / 2) {

    locX = x;
    locY = y;
    console.log(" Positivo Coordinate x: " + x, "Coordinate y: " + y);

  } else{

    locX = -x;
    locY = -y;

    console.log(" Negativo Coordinate x: " + locX, "Coordinate y: " + locY);
  }

  console.log("Coordinate x: " + x, "Coordinate y: " + y);

  var location = { posX: x, posY: y }
  return location;
}

let canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("mousemove", function (e) {

  this.style.cursor = "pointer";
  var getPosition = getMousePosition(canvasElem, e);

});