title: How to change the origin of the canvas to the center?
body: <p>I'm new to html and JavaScript, I am writing a program dealing with points and lines in a coordinate system, but as you know the origin of a canvas for html5 is at the upper corner, I want to build a coordinate system with its origin at the center of the canvas, I have tried the translate method and use the following method to print where my mouse is (ideally, I want it to display 0 : 0 when the mouse is at the center of the canvas), but it does not seem to work:</p>
  
  <pre><code>var mousePos = getMousePos(canvas1, evt);
  mouseX = mousePos.x;
  mouseY = mousePos.y;
  var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
  writeMessage(document.getElementById("canvas_prime_coor"), message);
  
  function writeMessage(canvas, message) {
      var context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.font = '18pt Calibri';
      context.fillStyle = 'red';
      context.fillText(message, 10, 25);
  }
  
  function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top};
  }
  </code></pre>