title: Invert X and Y coordinates on HTML5 canvas
body: <p>I am working on an interface that has a HTML5 canvas on it, and I need to invert the X and Y coordinates when you select a position.  I thought that subtracting the width of the canvas from the selected X position, and subtracting the height of the canvas from the selected Y position would invert the coordinates, but it is doing some very weird things.</p>
  
  <p>The X and Y coords that log when you click in the top left corner of the canvas are <code>X:324,Y:483</code> but theoretically, they should be <code>X:650,Y:587</code>, and when you click in the bottom right corner, the logged coordinates are <code>X:-325,Y:-103</code> when they theoretically should be <code>X:0,Y:0</code>.  As a side note, I do know that the dot that appears when you click is using the inverted coordinates, and that is fine.</p>
  
  <p>Any help is appreciated especially if I am doing something horribly wrong.  Thanks!</p>
  
  <p>JS:</p>
  
  <pre><code>window.fires.directive('fieldDirective', ['ScoutService', '$interval', function(ScoutService, $interval) {
      var $scope = this;
      $scope.sServ = ScoutService;
      $interval(function(){
          $scope.col = ScoutService.getAllianceColor();
      },1);
      return {
          restrict: "A",
          link: function(scope, element) {
              element.bind('mousedown', function(event) {
                  var canvas = document.getElementById('field');
                  var context = canvas.getContext('2d');
                  if(event.offsetX !== undefined) {
                      $scope.xPos = 650 - event.offsetX;
                      $scope.yPos = 587 - event.offsetY;
                      $scope.sServ.sendLobCoords(xPos, yPos);
                  } else {
                      $scope.xPos = 650 - event.layerX - event.currentTarget.offsetLeft;
                      $scope.yPos = 587 - event.layerY - event.currentTarget.offsetTop;
                      $scope.sServ.sendLobCoords(xPos, yPos);
                  }
                  console.log('red'+$scope.xPos + ' ' + $scope.yPos);
                  canvas.width = canvas.width;
                  context.arc($scope.xPos, $scope.yPos, 12, 0, Math.PI*2);
                  context.fillStyle = '#FFFF00';
                  context.fill();
                  context.lineWidth = 3;
                  context.strokeStyle = '#B2B200';
                  context.stroke();
                  context.closePath();
              });
          }
      };
  }]);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas field-directive id="field" ng-class="{'field-red': sCtrl.fieldColor === 'red', 'field-blue': sCtrl.fieldColor === 'blue'}" width="650" height="587"&gt;Your browser does not support the HTML5 Canvas Element.  Please use a supported browser such as Google Chrome 4.0+ or FireFox 2.0+.&lt;/canvas&gt;
  </code></pre>