title: HTML5 Canvas - draw circle from top left
body: <p>How would I alter the following code to force a HTML5 canvas to draw from the top-left of an arc, instead of from the centre.</p>
  
  <p>I currently have:</p>
  
  <pre><code>function drawCircle(e) {
      var oe = e.originalEvent || e;
  
      ctx.beginPath();
      ctx.arc(start.x, start.y + 10, oe.pageX - start.x - offset.left, 0, 2 * Math.PI, false);
      ctx.stroke();
      ctx.closePath();
  }
  </code></pre>
  
  <p>I have the following fiddle (code below for convenience) - if you begin drawing on that, the circle is drawn fine but it draws from the centre of where you place your mouse, outwards: <a href="http://jsfiddle.net/g4zxp/" rel="nofollow">http://jsfiddle.net/g4zxp/</a></p>
  
  <p>I would like to drag the circle from the top-left down, but I cannot figure out the maths to do it! I know I would need to calculate and keep changing the centre point.</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks</p>
  
  <p>Code as follows:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;canvas width="200" height="200"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>JavaScript/jQuery</strong>:</p>
  
  <pre><code>$(function () {
      var $canvas = $('canvas'),
          canvas = $canvas.get(0),
          offset = $canvas.offset(),
          ctx,
          drawing = false,
          start = {
              x: null,
              y: null
          };
  
      function init() {
          if (canvas.getContext) {
              ctx = canvas.getContext('2d');
  
              ctx.lineJoin = 'round';
              ctx.lineCap = 'round';
              ctx.strokeStyle = '#000000';
              ctx.lineWidth = 5;
          }
      }
  
      function startDrawing(e) {
          var oe = e.originalEvent || e;
  
          e.preventDefault();
  
          drawing = true;
  
          start.x = Math.floor(oe.pageX - offset.left);
          start.y = Math.floor(oe.pageX - offset.left);
      }
  
      function continueDrawing(e) {
          e.preventDefault();
  
          if (!drawing) {
              return;
          }
  
          clearCanvas();
          drawCircle(e);
      }
  
      function endDrawing(e) {
          e.preventDefault();
          drawing = false;
      }
  
      function clearCanvas() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
  
      function drawCircle(e) {
          var oe = e.originalEvent || e;
  
          ctx.beginPath();
          ctx.arc(start.x, start.y + 10, oe.pageX - start.x - offset.left, 0, 2 * Math.PI, false);
          ctx.stroke();
          ctx.closePath();
      }
  
      $canvas.on('touchstart mousedown', function (e) {
          startDrawing(e);
      });
  
      $canvas.on('touchmove mousemove', function (e) {
          continueDrawing(e);
      });
  
      $canvas.on('touchend mouseup', function (e) {
          endDrawing(e);
      });
  
      init();
  });
  </code></pre>