title: Custom canvas arc() method implementation
body: <p>Have a task to implement my own an arc() method using HTML5 Canvas.
  It should have the same signature as the native arc (typescript code):</p>
  
  <pre><code>arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
  </code></pre>
  
  <p>I understand that the circle will be drawn with many short lines by lineTo() method, so I need a possibility to set the precision (the number of lines. Maybe by a local const).
  Have some own examples that work with only certain circles. But the method has to be as universal as native arc() method.
  Any help/links will be appreciated.</p>
  
  <p>Current code (drawing a full circle).</p>
  
  <pre><code>private customCircleDraw(center: Point, radius: number, start: number = 0, end: number = 2) {
  const p1 = new Point(center.x + radius * Math.cos(start * Math.PI), -center.y + radius * Math.sin(start * Math.PI));
  const p2 = new Point(center.x + radius * Math.cos(end * Math.PI), -center.y + radius * Math.sin(end * Math.PI));
  
  const points = 50;
  let angle1;
  let angle2;
  for(let i = 0; i &lt; points; ++i) {
    angle1 =  i * 2 * Math.PI / points;
    angle2 = (i+1) * 2 * Math.PI / points;
    let firstPoint = new Point(center.x + radius * Math.cos(angle1), center.y + radius * Math.sin(angle1));
    let secondPoint = new Point(center.x + radius * Math.cos(angle2), center.y + radius * Math.sin(angle2));
    // if (some advanced condition) 
      this.drawLine(firstPoint,secondPoint);
  }
  </code></pre>
  
  <p>Also, please note, that point CENTER has inverted Y axis. And the canvas origin moved. To understand the situation better, I have deployed it to a temporary <a href="http://drawer.getforge.io" rel="nofollow noreferrer">link</a> . The example is now working with native arc() and I want to replace it.</p>