raidiun.github.io/circleTest.html at master · raidiun/raidiun.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<body>
<canvas width="500" height="500" id="canv"></canvas>
<script>
var canv = document.getElementById("canv");
var ctx = canv.getContext("2d");

ctx.strokeStyle = "#000";
ctx.lineWidth = 0.05;

// Draw a small radius "circle"
ctx.transform(100,0,0,100,250,250);
ctx.arc(0,0,2,0,2*Math.PI);

ctx.stroke();

ctx.strokeStyle = "#f00";
ctx.lineWidth = 1;

// Draw a larger radius circle
ctx.transform(0.01,0,0,0.01,0,0);
ctx.arc(0,0,200,0,2*Math.PI);

ctx.stroke();

</script>
<br/>
For radii greater than r = 4.12132048606872514184829014993738
it starts drawing circles again rather than squircles (On Chrome)

<br/>
Chrome 43.0.2357.132 (OS X and Win7) Not OK<br/>
Firefox 39.0 (OS X) OK<br/>
IE 11.0.9600.17843 (Win7) OK<br/>
Safari 8.0.7  (OS X) OK<br/>

</body>
</html>