1
//Source: http://stackoverflow.com/questions/8603656/html5-canvas-arcs-not-rendering-correctly-in-google-chrome
2
var is_chrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
3
if (is_chrome) {
4
  CanvasRenderingContext2D.prototype.arc = function (x, y, radius, startAngle, endAngle, anticlockwise) {
5
    // Signed length of curve
6
    var signedLength;
7
    var tau = 2 * Math.PI;
8

9
    if (!anticlockwise && endAngle - startAngle >= tau) {
10
      signedLength = tau;
11
    } else if (anticlockwise && startAngle - endAngle >= tau) {
12
      signedLength = -tau;
13
    } else {
14
      var delta = endAngle - startAngle;
15
      signedLength = delta - tau * Math.floor(delta / tau);
16

17
      // If very close to a full number of revolutions, make it full
18
      if (Math.abs(delta) > 1e-12 && signedLength < 1e-12) signedLength = tau;
19

20
      // Adjust if anti-clockwise
21
      if (anticlockwise && signedLength > 0) signedLength = signedLength - tau;
22
    }
23

24
    // Minimum number of curves; 1 per quadrant.
25
    var minCurves = Math.ceil(Math.abs(signedLength) / (Math.PI / 2));
26

27
    // Number of curves; square-root of radius (or minimum)
28
    var numCurves = Math.ceil(Math.max(minCurves, Math.sqrt(radius)));
29

30
    // "Radius" of control points to ensure that the middle point
31
    // of the curve is exactly on the circle radius.
32
    var cpRadius = radius * (2 - Math.cos(signedLength / (numCurves * 2)));
33

34
    // Angle step per curve
35
    var step = signedLength / numCurves;
36

37
    // Draw the circle
38
    this.lineTo(x + radius * Math.cos(startAngle), y + radius * Math.sin(startAngle));
39
    for (var i = 0, a = startAngle + step, a2 = startAngle + step / 2; i < numCurves; ++i, a += step, a2 += step)
40
      this.quadraticCurveTo(x + cpRadius * Math.cos(a2), y + cpRadius * Math.sin(a2), x + radius * Math.cos(a), y + radius * Math.sin(a));
41
  };
42
}
43

44
var context_2;
45
function beginPath(ctx, linewidth) {
46
  ctx.beginPath();
47
  ctx.lineWidth = linewidth;
48
  context_2 = ctx;
49
}
50

51
function pathMoveTo(x1, y1, x2, y2) {
52
  context_2.lineTo(x1, y1, x2, y2);
53
}
54

55
function pathCircle(x, y, radius) {
56
  context_2.moveTo(x, y);
57
  context_2.arc(x, y, radius, 0, 2 * Math.PI);
58
}
59

60
function pathStroke() {
61
  context_2.stroke();
62
}
63

64
function pathFill() {
65
  context_2.fill();
66
}
67

68
//Avoid the popup blocker
69
var urlOpenFunction;
70
function addLinkHandler(url) {
71
  urlOpenFunction = function (e) {
72
    var keyCode = e.keyCode;
73
    if (keyCode == 13 || keyCode == 32) {
74
      window.open(url, "_blank", "width=1000, height=500, location=yes, resizable=yes, scrollbars=yes, toolbar=yes");
75
      document.getElementById("canvas").focus();
76
    }
77
  };
78
  document.addEventListener("keydown", urlOpenFunction);
79
}
80

81
function removeLinkHandler() {
82
  document.removeEventListener("keydown", urlOpenFunction);
83
}
84

85
//Avoid keydown problems
86
var keys = {};
87
window.addEventListener(
88
  "keydown",
89
  function (e) {
90
    keys[e.keyCode] = true;
91
    switch (e.keyCode) {
92
      case 37:
93
      case 39:
94
      case 38:
95
      case 40: // Arrow keys
96
      case 32:
97
        e.preventDefault();
98
        break; // Space
99
      default:
100
        break; // do not block other keys
101
    }
102
  },
103
  false
104
);
105
window.addEventListener(
106
  "keyup",
107
  function (e) {
108
    keys[e.keyCode] = false;
109
  },
110
  false
111
);
112

113
function addAnimationPolyfill() {
114
  window.requestAnimFrame = (function () {
115
    return function (callback) {
116
      window.setTimeout(callback, 16);
117
    };
118
  })();
119
}
120