| <!DOCTYPE html> |
| <html> |
| <head></head> |
| <body> |
| <canvas id="mycanvas" width="300" height="300"></canvas> |
| <script> |
| function rad2deg(x) { |
| return x * 180 / Math.PI; |
| } |
| |
| function ellipseUsingArc(context, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) |
| { |
| var transform = new WebKitCSSMatrix(); |
| transform = transform.translate(x, y); |
| transform = transform.rotate(rad2deg(rotation)); |
| transform = transform.scale(radiusX, radiusY); |
| |
| /* |
| Use WebKitCSSMatrix instead of as follows, because using WebKitCSSMatrix computes float values more precisely. |
| It is because we don't want to fail pixel comparison due to float precision. |
| context.translate(x, y); |
| context.rotate(rotation); |
| context.scale(radiusX, radiusY); |
| */ |
| context.save(); |
| context.transform(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f); |
| context.arc(0, 0, 1, startAngle, endAngle, anticlockwise); |
| context.restore(); |
| } |
| |
| var canvas = document.getElementById('mycanvas'); |
| var ctx = canvas.getContext('2d'); |
| |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| ctx.lineJoin = 'bevel'; |
| ctx.lineWidth = 12; |
| ctx.beginPath(); |
| ellipseUsingArc(ctx, 200, 150, 40, 80, -Math.PI / 6, Math.PI / 2, -Math.PI / 2, false); |
| ellipseUsingArc(ctx, 100, 150, 40, 80, Math.PI / 6, Math.PI / 2, -Math.PI / 2, false); |
| ctx.stroke(); |
| </script> |
| </body> |
| </html> |
